具有可变行位置的引导网格

【问题标题】：Bootstrap grid with variable row placement具有可变行位置的引导网格
【发布时间】：2014-03-20 01:28:33
【问题描述】：

我正在尝试创建一个带有图像网格的页面。窗口大时每行显示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 来获得我正在寻找的行为？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

这正是我试图做的，但它似乎不起作用。当窗口很大时，我得到以下布局（其中X表示图像，-表示空格，\表示换行符）：XXXX\---X\X---我想要的是：XXXX\ XX--
这很奇怪。你能创建一个 jsfiddle 或 bootply 让我看看吗？
去这样做，发现我只是放错了结束标签:)。感谢您的帮助。
我想我们都去过那里！干杯。