html - Bootstrap 列环绕

Question

我是 bootstrap 的新手，所以我一定错过了一些简单的东西......

我想要一个带有照片的网格面板。如果屏幕足够宽，我想并排显示四个面板。如果太窄，我想显示两行，每行两行。

...所以我在 div 中使用以下类设置了四个面板:

 <div class="col-sm-6 col-md-3">
...panel
</div>

在中等尺寸和更大的尺寸下，它可以形成一个不错的四面板宽布局，但在小尺寸下，面板排列得不太正确。

http://i.imgur.com/mykMpTp.png?1

http://www.bootply.com/Ap3qW1cQ6q

Answer 1

要解决此问题，您需要在第二列和第三列之间使用 clearfix 和响应实用程序类(例如 visible-sm)。您可以阅读有关响应列重置的信息 here .

<div class="clearfix visible-sm"></div>

它应该是这样的:

<div class="col-sm-6 col-md-3">
</div>

<div class="col-sm-6 col-md-3">
</div>

<div class="clearfix visible-sm"></div>

<div class="col-sm-6 col-md-3">
</div>

<div class="col-sm-6 col-md-3">
</div>

这是更新后的 Bootply 链接:http://www.bootply.com/NsYQ16DZrf