gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:57:24 26 4
gpt4 key购买 nike

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

Grid to List

演示:(无 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"> .

我该怎么做?

最佳答案

您需要使用 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 列布局。

关于jquery - 使用 Twitter Bootstrap 进行基于网格和堆栈的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14091605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com