Twitter Bootstrap 中每行多个跨度 [英] Multiple spans per row in Twitter Bootstrap

问题描述

我正在开发一个使用 Bootstrap 2.2.2 的项目.由于其性质，最好不要每 12 列关闭一行，即:

<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>(……)

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

解决方案

需要注意的一点是，如果 span 的高度不同，您的内容的顺序可能会被打乱，因为没有等效的每第三个span4后清除修复.

请参阅 http://jsfiddle.net/panchroma/czxJB/ 上的第二行这方面的例子.

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

.row.multiple .span4:nth-child(3n+4) {清除:左；}

祝你好运！

I'm working on a project for which I use Bootstrap 2.2.2. Due to its nature, it would be most convenient to NOT close the row every 12 columns, i.e.:

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

Does this method have any drawbacks? So far during testing I haven't found any issues with such layout under Chrome, Firefox or IE 9. However, if there are any issues that you are aware of, I will appreciate any information (especially if it breaks the layout for any older browsers, although I do not care about IE7 or older).

解决方案

One thing to watch out for is that if the spans are different heights, the order of your content could be thrown off because there isn't the equivalent of a clearfix after each third span4.

See the second row on http://jsfiddle.net/panchroma/czxJB/ for an example of this.

This could be overcome with some custom CSS though. See the results of the third row which has this extra CSS applied to

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

Good luck!

这篇关于Twitter Bootstrap 中每行多个跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！