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

标签 css twitter-bootstrap layout twitter-bootstrap-3 grid

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

这是我想要实现的:

这个: enter image description here

对此:enter image description here

但我得到的是:enter image description here

最佳答案

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

 <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

关于css - Bootstrap 3 - col-md-4 到 col-sm-6,或 3x2 到 2x3 的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29926617/

相关文章:

javascript - 如何检测鼠标在 jQuery 中的子元素上?

html - 如何在移动和桌面设备上连续显示不同的图像

html - Svg 动画 : begin and end

css - 奇怪的 Wordpress/CSS 问题

css - Bootstrap 4 - 如何在卡片右侧 float 一个 div?

javascript - 在 Rails 中使用 bootstrap-sass,Bootstrap/Javascript 不工作

html - 单击 Bootstrap 4 navbar-toggler 使动画内容比屏幕宽

javascript - 如何在 colspan td 中与 td 的 th 宽度相同

android - CheckBox 的左填充和上填充不起作用

带有方形按钮的 Android 布局