1

我正在开发一个使用 Bootstrap 2.2.2 的项目。由于其性质，最方便的是不要每 12 列关闭该行，即：

<div class="container">
    <div class="row">
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        (...)
    </div>
</div>

这种方法有什么缺点吗？到目前为止，在测试期间，我没有发现在 Chrome、Firefox 或 IE 9 下此类布局存在任何问题。但是，如果您发现任何问题，我将不胜感激（尤其是如果它破坏了任何旧版的布局）浏览器，虽然我不关心 IE7 或更早版本）。

4

2 回答 2

7

需要注意的一件事是，如果跨度的高度不同，则您的内容顺序可能会被抛出，因为在每三个跨度之后没有等效的 clearfix4。

有关此示例， 请参见http://jsfiddle.net/panchroma/czxJB/上的第二行。

不过，这可以通过一些自定义 CSS 来克服。查看应用了这个额外 CSS 的第三行的结果 

.row.multiple .span4:nth-child(3n+4) {  
clear:left;
}

祝你好运！

于 2013-01-14T18:39:01.323 回答
2

大卫的好回答！这是我从答案派生的css，并针对所有可能的行/跨度进行了扩展，希望对您有所帮助

.row.multiple .span6:nth-child(2n+3), .row-fluid.multiple .span6:nth-child(2n+3) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span4:nth-child(3n+4), .row-fluid.multiple .span4:nth-child(3n+4) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span3:nth-child(4n+5), .row-fluid.multiple .span3:nth-child(4n+5) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span2:nth-child(6n+7), .row-fluid.multiple .span2:nth-child(6n+7) {  
    clear:left;
    margin-left: 0px;
}
于 2013-04-19T12:12:28.733 回答