Boostrap柱包装

Question

我是初学者，所以我必须在这里找不到容易的东西......

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

...所以我在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

Answer 2

你想要做到这一点吗？ https://jsfiddle.net/DIRTY_SMITH/5gs8pojm/2/

<div class="row">
  <div class="col-md-3 col-xs-6">

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

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

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

  </div>
</div>