javascript - 展示 Bootstrap 网格中的前 n 项

Question

我使用 Bootstrap 网格处理响应式设计的页面。根据规范，我需要能够用更大的图像展示网格中的第一行。通常我希望第一行有 3 张图片，而网格的其余部分每行有四张图片。

下图最好地说明了我试图完成的事情:

我怎样才能使这项工作？类、CSS 和 JavaScript 的解决方案都被接受，因为我控制所有客户端代码。

Answer 1

这应该让你开始:http://codepen.io/panchroma/pen/BLrvAw

所有元素都在同一行中，因此它们可以随着网格的变化而 float ，其他所有元素都使用标准的 Bootstrap 类。

我应该补充一点，当所有 .col 元素的高度都相同时，这种方法效果很好。所有这些 Bootstrap 列元素都是 float:left;，如果高度不同，则某些 div 可能不会 float 到预期位置。解决方法是您可能必须对选定的列元素应用一些自定义样式，例如clear:left;

祝你好运!

<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">1</div>
  <div class="col-md-4 col-sm-6 col-xs-6">2</div>
  <div class="col-md-4 col-sm-4 col-xs-6">3</div>

<div class="col-md-3 col-sm-4 col-xs-6">4</div>
  <div class="col-md-3 col-sm-4 col-xs-6">5</div>
  <div class="col-md-3 col-sm-4 hidden-xs">6</div>
  <div class="col-md-3 col-sm-4 hidden-xs">7</div>

<div class="col-md-3 col-sm-4 hidden-xs">8</div>
  <div class="col-md-3 col-sm-4 hidden-xs">9</div>
  <div class="col-md-3 col-sm-4 hidden-xs">10</div>
  <div class="col-md-3 col-sm-4 hidden-xs">11</div>
</div>