Twitter Bootstrap中每行多个跨度

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

祝好运!