jquery - 使用 Twitter Bootstrap 的基于网格和堆栈的布局

Question

有没有人尝试在 twitter bootstrap 中结合 Backbone.js Collection 实现 Grid、Stack 布局？

演示：（没有引导）

http://vandelaydesign.com/demos/list-grid-view/index.html

列表布局是东方实现的，集合中的每个模型都有以下标记。

<div class="row">
 <div class="span12">
 </div>
</div>

即使将一行中的模型数量设置为固定，网格布局也似乎更加复杂。假设我在这里每行渲染 4 个模型是所需的标记

<div class="row">
  <div class="span3"></div>
  <div class="span3"></div>
  <div class="span3"></div>
  <div class="span3"></div>
</div>

生成上述标记非常困难，因为我必须4 div's with class span3将<div class="row">.

我该怎么做呢？

Answer 1

您需要使用 CSS 伪类:nth-child来实现这一点。这是您的 HTML：

<div class="row column3">
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
</div>

唯一改变的是column3类的添加。这是您需要的 CSS：

.column3 > div:nth-child(3n+4) {
    clear: left;
}

这应该告诉每个第 3 个元素之后的每个元素都清除到下一行，从而为您提供 3 列布局。