使用 Twitter Bootstrap 的基于网格和堆栈的布局答案

【问题标题】：Grid and Stack based layout with Twitter Bootstrap使用 Twitter Bootstrap 的基于网格和堆栈的布局
【发布时间】：2012-12-30 14:39:34
【问题描述】：

有没有人尝试在 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"> 中。

我该怎么做呢？

【问题讨论】：

标签： jquery templates backbone.js twitter-bootstrap underscore.js

【解决方案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 列布局。

【讨论】：