Question

我正在尝试创建一个带有图像网格的页面。当窗口很大时，我想每行显示4个图像，当它是中等大小时，每行3个图像，当它很小时，每行显示2个图像。

但是，Bootstrap的grid system documentation似乎表明必须事先修复换行符，例如：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  ...
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
...

有没有办法使用Bootstrap来获取我正在寻找的行为？

Answer 1

底线是行需要等于12来填补空间。您可以只有一行，所有内容都将根据视口进行重排：

<div class="row">
  <div class="col-xs-6 col-md-4 col-lg-3"><img></div>
  <div class="col-xs-6 col-md-4 col-lg-3"><img></div>
  <div class="col-xs-6 col-md-4 col-lg-3"><img></div>
  <div class="col-xs-6 col-md-4 col-lg-3"><img></div>
  <div class="col-xs-6 col-md-4 col-lg-3"><img></div>
  <div class="col-xs-6 col-md-4 col-lg-3"><img></div>
 ...
</div>

具有可变行放置的Bootstrap网格

1 个答案: