How can I ensure columns wrap equally in Twitter B

问题:

If I have an unknown number of items to display, each within their own column, is there a way to get them to wrap equally without having to create new rows for each?

I have

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

The columns will have varying heights, which can sometimes lead to unequally distributed columns:

Is it possible to get the columns to always wrap in rows of 4 columns (for medium), 3 columns (for small), or 2 columns (for extra-small) with just CSS, or will I need some JS or to use some server side programming to create new rows?

回答1:

Thats unfortunately not how the grid works. You could use something like masonry or have different containers generated for each breakpoint with 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>

回答2:

There is the way to clear Bootstrap columns as mentioned by Maciej. This can be done this way:

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

The article contains full source which makes it work universally from sm to lg.

回答3:

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.

回答4:

Use Responsive Column Resets: http://getbootstrap.com/css/#grid-responsive-resets

I was creating an event viewer that would show 12 different events. In large mode I wanted them 4x3, medium 3x4, small 2x6, and x-small just stacked.

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