Javascript 我如何确保在Twitter引导3中列的包装是平等的？

如果我有未知数量的项目要显示，每个项目都在自己的列中，有没有办法让它们平均包装，而不必为每个项目创建新行

我有

<div class="row">
    <!-- 1st col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Short</p></div>
    <!-- 2nd col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem</p></div>
    ...
    <!-- nth col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem that might be long</p></div>
</div>

标题loremShort

标题lorem描述lorem

...
标题lorem描述可能很长的lorem

立柱高度不同，有时可能导致立柱分布不均匀：

---

是否可以使用CSS将列始终包装成4列（对于中等）、3列（对于小型）或2列（对于超小型）的行，或者我需要一些JS或使用一些服务器端编程来创建新行？

不幸的是，网格不是这样工作的。您可以使用类似的方法，或者使用php为每个断点生成不同的容器。e、 g:

<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>

。。。
... 
... 

如果我正确理解了您的问题，只需在需要在一行中的每组元素之后相应地应用

.clearfix

就足够了

检查

另一种解决方案是将CSS

：n子类

伪类与媒体查询结合使用。对于每个分辨率，将有一个不同的

n-th

元素，该元素带有

clear:both

，这将创建一个新行

请看一本书

如Maciej所述。这可以通过以下方式完成：

 .col-lg-3:nth-child(4n+1){
   clear: left;
 }

---

这篇文章包含了完整的源代码，使它可以从

sm

到

lg

使用响应列重置：

我正在创建一个事件查看器，可以显示12个不同的事件。在大模式下，我希望它们是4x3、中等3x4、小2x6和x-small，只是堆叠起来

<div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 1</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 2</div>  

          <div class="clearfix visible-sm-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 3</div>

          <div class="clearfix visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 4</div>

          <div class="clearfix visible-sm-block visible-lg-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 5</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 6</div>

          <div class="clearfix visible-sm-block visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 7</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 8</div>    

          <div class="clearfix visible-sm-block visible-lg-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 9</div>

          <div class="clearfix visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 10</div>    

          <div class="clearfix visible-sm-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 11</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 12</div>
</div>

文本1
文本2
文本3
文本4
文本5
文本6
文本7
文本8
文本9
文本10
案文11
文本12

谢谢--+1的示例。看起来不错，但需要知道哪些内容会比其他内容长，而且因为我是从数据库中填充的，所以我不会提前知道。效果非常好。这应该是公认的答案，不客气。如果您不太关心跨浏览器，您也可以尝试将css列与媒体查询结合使用。谢谢！这确实挽救了一天。。也只是一个注释，但它只适用于所有COL大小相同的情况。