如何在Twitter Bootstrap 3中確保列均勻包裝？

Question

如果我要顯示未知數量的項目，每個項目都在自己的列中，是否有辦法讓它們平均包裝而不必為每個項目創建新行？

我有

<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>

列將具有不同的高度，這有時會導致不均勻分布的列：

有沒有可能讓列總是包含4列（對於中），3列（對於小）或2列（對於超小）的行只有CSS，或者我需要一些JS或使用一些服務器端編程創建新行？

Answer 1

有一種方法可以清除 Maciej提到的Bootstrap列 。 這可以這樣做：

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

該文章包含完整的源代碼，使其從sm到lg普遍適用。

Answer 2

如果我正確地理解了你的問題，那么在每組需要在一行中的元素之后應該相應地應用.clearfix就足夠了。

檢查示例

另一種解決方案是將CSS :nth-child偽類與媒體查詢結合使用。 對於每個分辨率，將有一個不同n-th元素具有clear:both ，這將創建一個新行。

快速瀏覽如何使用：nth-​​child 。

Answer 3

很遺憾，這不是網格的工作原理。 您可以使用類似砌體的東西，或者使用php為每個斷點生成不同的容器。 例如：

<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>

Answer 4

使用響應列重置： http ： //getbootstrap.com/css/#grid-responsive-resets

我正在創建一個能夠顯示12個不同事件的事件查看器。 在大模式下，我想要它們4x3，中等3x4，小2x6和x小只是堆疊。

<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>