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

Question

有人尝试过在 twitter bootstrap 中结合 Backbone.js Collection 实现网格、堆栈布局吗？

演示:(无 Bootstrap )

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 列布局。