连续的最后一个元素没有对齐

Question

我使用bootsrap 3作为我的CSS框架来设计我的网站。

<div class="row">

  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
           .
           .
           .
</div>

我们的想法是将col-lg-4 div添加到一行中，col-lg-4 div会在超出行宽时自动移动到下一行。

一般来说，它运作正常。但是，第一行的最后一个col-lg-4 div未正确对齐。演示地址为：http://imaboy.cn/blog/forums/

你知道为什么会这样吗？

以下是截图：

http://www.imaboy.cn/screenshot.jpg

Answer 1

很容易。在第一列的最后一行，你有一个col-lg-4元素，它有一行额外的文本，使其更高。这会导致中断列的正常浮动。见下图：

如您所见，米色区域即将与左侧的列碰撞。请参阅下面的图片，以便更好地了解问题：

我添加了透明度，以便您可以看到碰撞以及火箭列如何阻挡所有浮动。

解决方案

只需将其添加到您的CSS：

.col-md-6.col-xs-6.col-sm-6.col-lg-4{min-height:70px; margin-top:20px; }

现在确保这些列具有适当的高度以便轻松浮动（如果需要，可以调整该高度）。另外，我已经将margin-top声明添加到CSS而不是inline，因为最好将它全部放在样式表中。此外，您应该考虑为这些列提供一个名称，例如myCol，这样您就不会有影响网站中任何位置的列的风险，您可以轻松地将它们作为目标

.myCol{min-height:70px; margin-top:20px; }