Boostrap 3 - col-md-4 到 col-sm-6，或 3x2 到 2x3 的网格

2022-01-18 00:00:00 grid layout css twitter-bootstrap twitter-bootstrap-3

如何将 3x2 的网格更改为 2x3，而不会有一行结束另一行开始的空白空间?

How can I change a grid of 3x2 to 2x3 without having an empty space where one row ends and another starts?

例如:

 <div class="row"> 
     <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
</div>
<div class="row"> 
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
</div>

这就是我想要实现的目标:

This is what I want to achieve:

这个:

对此:

但是我得到了这个:

推荐答案

只需将它们放在一行中 - 它会自动结束.

Just put it all in one row - it'll wrap down automatically.

 <div class="row"> 
     <div class="col-md-4 col-sm-6">
        content 1
    </div>
    <div class="col-md-4 col-sm-6">
        content 2
    </div>
    <div class="col-md-4 col-sm-6">
        content 3
    </div>
    <div class="col-md-4 col-sm-6">
        content 4
    </div>
    <div class="col-md-4 col-sm-6">
        content 5
    </div>
    <div class="col-md-4 col-sm-6">
        content 6
    </div>
</div>

JSFiddle

相关文章