9

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

我有

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

列将具有不同的高度，这有时会导致列分布不均：

在此处输入图像描述

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

4

4 回答 4

15

如 Maciej 所述，有清除 Bootstrap 列的方法。这可以通过以下方式完成：

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

这篇文章包含完整的源代码，使其可以从sm到通用lg。

于 2014-03-09T19:54:58.613 回答
13

If I understood your problem correctly, it should be enough to just apply .clearfix accordingly after each set of elements that need to be in one line.

Check the example

And alternative solution is to use CSS :nth-child pseudo-class in combination with media queries. For each resolution, there would be a different n-th element with clear:both, that would create a new row.

Take a look at a quick overview how to use :nth-child.

于 2013-11-12T01:03:53.940 回答
2

不幸的是，这不是网格的工作方式。您可以使用砌体之类的东西，或者使用 php.ini 为每个断点生成不同的容器。例如：

<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>
于 2013-11-12T00:39:29.120 回答
2

使用响应列重置： http: //getbootstrap.com/css/#grid-responsive-resets

我正在创建一个显示 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>
于 2016-04-28T20:24:27.680 回答