Question

我似乎无法弄清楚为什么在这个非常简单的行中我的列之间有一个空格。我希望elemenets能够相互接触并填充100％的柱空间，即使它们的宽度不是100％？添加了带边框的通用选择器，以便可以看到空白区域。

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>

  <div class="row">
    <div class="col-md-2">
      <div class="long-brick1">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick2">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick3">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick2">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick3">
      </div>
    </div>
    <div class="col-md-2">
      <div class="long-brick2">
      </div>
    </div>
  </div>
  <!--row -->

</body>

</html>

protected async override void OnNavigatedTo(NavigationEventArgs e)
{
     var temp = e.Parameter as ObservableCollection<Information>;
     foreach (var item in temp)
     {
          //Do something here
     }
}

Answer 1

据我所知，您的示例显示了完全正常的Bootstrap行为。任何col-* div都有左右填充15 px。

有关Bootstrap网格系统的更多信息，请参阅http://getbootstrap.com/css/#grid-intro。

当然，您可以通过重置col-md-2或任何其他所需类的默认填充来覆盖此默认行为：

.col-md-2 {padding: 0}

Answer 2

默认情况下，Bootstrap col-*每个 15px padding-left 和 padding-right 。

要摆脱默认填充，您需要将自定义样式应用于此效果。

你需要做这样的事情：

.col-md-2 {
    padding: 0;
}

Answer 3

* {border:5px solid;
  padding-left: 0px !important;
 padding-right: 0px !important;  
 }

尝试这个即时解决方案。最好使用自定义类，如

   .nopad{ 
     padding:0 !important;
    }
   .nomargin{
     margin: 0px !important;
    }

并在需要时调用此类 -

<div class="col-md-2 nopad">
 <div class="long-brick2">   
 </div>
</div>

也许你对'重要＆＃39;感到困惑。 [无论CSS规则中出现哪个规则，都将始终应用具有！important属性的规则] 快乐编码:)

引导列之间奇怪的“填充”

3 个答案: