Question

我正在开发一个使用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或更早版本。）

Answer 1

需要注意的一点是，如果跨度是不同的高度，则内容的顺序可能会被抛弃，因为在每个第三个span4之后没有相应的clearfix。

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

这可以用一些自定义CSS来克服。查看将此额外CSS应用于

的第三行的结果

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

祝你好运！

Answer 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;
}

Twitter Bootstrap中每行多个跨度

2 个答案: