繁体   English   中英

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

[英]Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3

如何在没有空行的情况下将3x2的网格更改为2x3,其中一行结束而另一行开始?

例如:

 <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

把它们全部放在一排。 看到这个bootply

喜欢:

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM