Question

我正在使用bootstrap的网格系统。我有以下部分。

A1 A2 A3
B1 B2 B3 B4

A是宽的，B是窄的。我希望它在一个狭窄的屏幕上崩溃：

A1
A2
A3
B1 B2 
B3 B4

换句话说，如果有空间，我不希望所有的B在不同的行上。在一个非常小的显示器上虽然它应该崩溃，让每个B在一个单独的行上。这可能吗？

这是一个简单的例子

<div class="row">
    <div class="col-sm-4">
        Long test here
    </div>
    <div class="col-sm-4">
        Long test here
    </div>
    <div class="col-sm-4">
        Long test here
    </div>
</div>
<div class="row">
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
</div>

jsfiddle here：http://jsfiddle.net/GrimRob/e3wtm3z8/3/

Answer 1

演示：http://jsfiddle.net/xdL5ywm7/1/

这取决于你在狭窄的屏幕上的意思。您可以在第一个col-sm-4中将col-md-4更改为.row，将全宽度更改为992px。在第二个.row中将所有col-sm-3更改为col-xs-6 col-sm-3，并在该断点的12列之后添加响应实用程序clearfix。请参阅文档和演示链接。

col-sm is 768px and up
col-md is 992px and up
col-lg is 1200px and up

如果您的.col-md-*低于992px，则该列将为全宽。

你的小提琴与你问题中的代码不符，我没有解决这个问题。

引导网格可以部分崩溃吗？

1 个答案: