Css 具有空列md的引导行

我有一个简单的div和row类，子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>

我猜问题出在“DIV4”上，但无法找到原因并修复它。

Avinash

bootstrap中的每一行都可以有大小为“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>

---

它可以工作：）

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

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

正如其他一些答案所建议的，您可以向标记中添加更多元素。但是，如果将引导与一个模板一起使用，其中有未知数量的项（列--）被添加到行中，则通常需要某种脚本来包装每行中正确数量的项。此外，例如，如果您的项目在大屏幕上是4跨（col-md-3），但在小屏幕上是3跨（col-md-4），那么您将在小屏幕上自己的行中每4个项目结束一次

多亏了CSS3，当您的项目一致地使用同一组网格类时，有一些方法可以在不编写脚本的情况下解决此对齐问题。如果将class

multi-row helper

添加到引导行中，下面的CSS将清除每行新项目的第一个项目上的浮动，使它们不受上面项目不规则大小的影响

/**编辑：将断点更新为引导默认值-我无意中添加了一些自定义断点…用断点的值替换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来解决这个问题通常是值得的

值得一提的是，使用SCS会更漂亮一些：

.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;}
  }
}

---

我猜Div1中的内容比Div2中的内容长/高？如果是这样的话，div5只是在下一个可用空间中浮动。到目前为止发布的添加更多行来包装列的解决方案只有在始终具有相同数量的div/行的情况下才有帮助。我怀疑这是由于ryan提到的不同高度问题造成的。如果不是，请发布代码重新创建您看到的问题，如果dup无法解决问题，我可以重新打开。这是。这是不正确的。在单个

.row

@ZimSystem中使用超过12个单位没有什么错引导文档对您不利：“Column类表示您希望在可能的每行12个单位中使用的列数”-@ProfK是整个视口中的一个可视行，不要被误认为是

行中允许的
.col-*-*
。
行中超过12个称为。如果你想了解更多。此外，您的链接引用的是Bootstrap v4文档，该文档与此问题所涉及的Bootstrap v3具有不同的基于flexbox的网格。感谢@ZimSystem，这对Bootstrap来说是一个全新的概念，昨天与专栏文章进行了讨论。我被纠正了。
.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;}
  }
}