twitter-bootstrap - 具有可变行放置的 Bootstrap 网格

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 才能填满空间。您可以只有一行，所有内容都会根据视口(viewport)重排:

<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>