css - 如何对齐到循环中下一行的最高列？

Question

如何对齐到循环的下一行中的最高列？我希望它看起来像第一张图片，而不是第二张图片。 Div 在循环中呈现:

  <div class="container">
    <div class="row">
        <? foreach($a as $b): ?>
            <div class="col-xs-12 col-sm-6 col-md-4"" >
                $b->foo
            </div>
        <? endforeach ?>
    </div>
</div>

第一张图片(不受欢迎): 第二张图片(理想的解决方案):

Answer 1

这是 float 的副作用，您需要清除每个第 x 个元素上的 float ，sm 和 md 断点使用不同的“x”。

nth-child 选择器对此有所帮助。为了不必根据任何特定的 col-xy-foo 类选择列，我只需在此处使用子选择器 .row > :nth-child(...)，行本身如有必要，可通过附加类或 ID 进行更独特的选择。