在 bootstrap 网格中展示第一个 n-items

Question

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

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

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

Answer 1

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

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

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

Answer 2

我通过在设置 bootstrap 列类的循环中手动添加类解决了这个问题。

if(idx === 0){
    containerElem.append($('<span class="col-xs-12 col-sm-6 col-md-4 game-wrapper"></span>').append(item));
} else if (idx === 1){
    containerElem.append($('<span class="col-xs-6 col-sm-6 col-md-4 game-wrapper"></span>').append(item));
} else if (idx === 2) {
    containerElem.append($('<span class="col-xs-6 col-sm-4 col-md-4 game-wrapper"></span>').append(item));
} else{
    containerElem.append($('<span class="col-xs-6 col-sm-4 col-md-3 game-wrapper"></span>').append(item));
}

因此第一项获得 "col-xs-12"，第一项和第二项获得 "col-sm-6"，前三项获得 "col-md-4"。

可能不是最优雅的解决方案，但至少它有效。

在 bootstrap 网格中展示第一个 n-items

Showcase the first n-items in a bootstrap grid

javascript

css

responsive-design

twitter-bootstrap

responsive