Bootstrap 3 - col-md-4 到 col-sm-6，或 3x2 到 2 x 3 的网格

Posted 2023-03-06

【中文标题】Bootstrap 3 - col-md-4 到 col-sm-6，或 3x2 到 2 x 3 的网格

【英文标题】：Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3

【发布时间】：2015-07-07 17:29:15

【问题描述】：

如何将 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>

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

这个：

对此：

但是我得到了这个：

【问题讨论】：

你用什么代码来改变它？您只提供了初始方向的代码。

仅使用引导程序默认媒体查询：col-md-4 和 col-sm-6。我不认为我会需要其他任何东西。对 col-md-3 到 col-sm-6 有效

【参考方案1】：

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

 <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

【参考方案2】：

把它们放在一排。见this 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>

【讨论】：

以前没遇到过bootply，不错