Question

我有一个简单的div，行级有子级div和col-md-3类。

<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
</div>

我在第一行获得div，但我的第二行有空格，然后剩下的div。

DIV1        DIV2         DIV3        DIV4
            DIV5         DIV6        DIV7

我猜测问题与＃34; DIV4＆＃34;有关，但无法得到原因并修复它。

Answer 1

注意：Bootstrap 4似乎没有这个问题，因为它使用flexbox而不是浮点数作为网格列。对于Bootstrap 3或更早版本，这是浮动的限制。

如果你的所有物品都是相同的高度，这不是问题，但如果你有动态内容和动态数量的物品，你就会有一场战斗。

正如其他一些答案已经提出的那样，你可以在你的标记中添加更多元素。但是，如果您使用bootstrap以及一个模板，其中有一个未知数量的项目（col- - ）被添加到该行，通常需要某种脚本来包装正确的数量每行中的项目。此外，例如，如果您在大屏幕上有4个横跨（col-md-3）的项目，但在小屏幕上有3个横跨（col-md-4），那么您最终会在其自己的行上每隔4个项目在小屏幕上。

感谢CSS3，当你的项目使用同一组网格类时，有一些方法可以在没有脚本的情况下解决这种对齐问题。如果您将类multi-row-helper添加到引导行，则下面的CSS将清除每个新项目行的第一项上的浮动，以防止它们受到上述项目的不规则大小的影响。

/ **编辑：将断点更新为bootstrap默认值 - 我无意中添加了一些自定义的...用你的断点值替换px值!! ** /

.multi-row-helper div[class~="col-xs-2"]:nth-child(6n+1),
.multi-row-helper div[class~="col-xs-3"]:nth-child(4n+1),
.multi-row-helper div[class~="col-xs-4"]:nth-child(3n+1),
.multi-row-helper div[class~="col-xs-6"]:nth-child(2n+1) {
  clear: left;
}

@media (min-width: 768px) {
  .multi-row-helper.row > div[class*="col-xs-"] {
    clear: none;
  }
  .multi-row-helper div[class~="col-sm-2"]:nth-child(6n+1),
  .multi-row-helper div[class~="col-sm-3"]:nth-child(4n+1),
  .multi-row-helper div[class~="col-sm-4"]:nth-child(3n+1),
  .multi-row-helper div[class~="col-sm-6"]:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 992px) {
  .multi-row-helper.row > div[class*="col-sm-"] {
    clear: none;
  }
  .multi-row-helper div[class~="col-md-2"]:nth-child(6n+1),
  .multi-row-helper div[class~="col-md-3"]:nth-child(4n+1),
  .multi-row-helper div[class~="col-md-4"]:nth-child(3n+1),
  .multi-row-helper div[class~="col-md-6"]:nth-child(2n+1) {
    clear: left;
  }
}

这不是最简单的解决方案，但如果您在网站上使用大量重复网格（例如电子商务产品网格），那么通常需要额外的一些CSS来解决此问题。

对于它的价值，使用SCSS更加漂亮：

.multi-row-helper {
  div[class~="col-xs-2"]:nth-child(6n+1),
  div[class~="col-xs-3"]:nth-child(4n+1),
  div[class~="col-xs-4"]:nth-child(3n+1),
  div[class~="col-xs-6"]:nth-child(2n+1)
    {clear:left;}


  @media (min-width:768px) {
    &.row > div[class*="col-xs-"]
      {clear:none;}
    div[class~="col-sm-2"]:nth-child(6n+1),
    div[class~="col-sm-3"]:nth-child(4n+1),
    div[class~="col-sm-4"]:nth-child(3n+1),
    div[class~="col-sm-6"]:nth-child(2n+1)
      {clear:left;}
  }

  @media (min-width:992px) {
    &.row > div[class*="col-sm-"]
      {clear:none;}
    div[class~="col-md-2"]:nth-child(6n+1),
    div[class~="col-md-3"]:nth-child(4n+1),
    div[class~="col-md-4"]:nth-child(3n+1),
    div[class~="col-md-6"]:nth-child(2n+1)
      {clear:left;}
  }
}

Answer 2

Avinash !!

引导程序中的每一行都可以包含大小为“12”的列，因此在您的情况下，列大小为18，这就是为什么，所以在填充三个div（12）后填充它的空间。

创建两行并在其中放置3-3个div。

<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
 </div>

<div class="row">
  <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

它会起作用:)）

Bootstrap行与空col-md

2 个答案: