当前位置 : 主页 > 网页制作 > css >

css – Boostrap 3 – col-md-4到col-sm-6,或3×2到2×3的网格

来源:互联网 收集:自由互联 发布时间:2021-06-13
如何在没有空行的情况下将3×2的网格更改为2×3,其中一行结束而另一行开始? 例如: 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-s
如何在没有空行的情况下将3×2的网格更改为2×3,其中一行结束而另一行开始?

例如:

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

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

这个:

对此:

但相反,我得到了这个:

把它全部放在一行 – 它会自动包裹起来.

<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

网友评论