Question

我使用Bootstrap 3进行了三列布局。它在全尺寸上工作得很好，有三列，一列用于小屏幕。在两个列之间，它没有填充所有空格，看起来像

* *
*
* *
*
* *
*

如何填写中等大小布局中的所有空间？

我目前的项目类是col-md-4 col-xs-12 col-sm-6

可以在此处查看完整的示例代码：http://majca.org/bootstrap_thumb_test.html

Answer 1

将所有内容放在一行中。您的标记中现在有两行，Bootstrap将始终在每行的第3（和最后）元素之后换行。

所以而不是

<div class = "row">
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
</div>
<div class = "row">
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
</div>

使用此

<div class = "row">
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
</div>

Answer 2

一个简单的解决方案是从每个 3n计数 div中移除<div class='row'>，因为这会妨碍您的布局。

这样一来，既然你有col-md-4用于div而BS跟在12 grid system之后，你将在最大分辨率上有最多3个div，并且在调整大小时它不会破坏对齐

检查小提琴 here （我只删除了一个用于演示的行类）

如何使用从3到2到1列的引导程序进行响应式布局？

2 个答案: