Twitter Bootstrap - 行流体的位置问题

Question

我目前正在使用Twitter bootstrap构建一个网站(这太棒了!).我使用了以下布局:

<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

哪个效果很好,基本上我每行有2个div,而且我们不需要在循环中包含一个计数器来摆脱边距.它是完美的!但我们决定改变我们对固定布局的看法,所以我从.row切换到.row-fluid.这就是问题来临的时候.

我知道有这样的事情:

<div class="row-fluid">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

而.span6的div在第一行效果很好,但是.span6上的margin-left从第二行开始显示,因此布局很好......不好.

我很惊讶它的固定布局效果令人惊叹,但不是流畅的.有解决办法吗？我在我的所有网站上都使用了这个,所以不得不为所有这些网站添加计数器......太多了.

这是JS小提琴:http: //jsfiddle.net/denislexic/uAs6k/3/

任何帮助表示感谢,谢谢.

Answer 1

<div class="span6"></div>根据12列网格设置,您的2个示例实际上在全宽'行'中有4 个...加起来为'24',或者是'row'或'row-fluid'的宽度的两倍.当父级行的宽度太多而无法适应时,您基本上创建了浮点数.(这也是为什么似乎'margin-left:0'没有应用到你的第3个'span6',看起来它是第2行的第一个'span6'.)

在默认的/固定的"行"时,嵌套列的"跨度*的+'偏移*的将需要小于或等于它的父的列"跨度*",或者如果它是第一级行,然后12,因为浮动的'span*'宽度以像素为单位.

在灵活/流动的"行 - 流体"中,列宽由百分比设置,因此每行和嵌套行可以具有嵌套列'span*'和'offset*',每次最多可添加12个. http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

这可以通过'row-fluid'设置解决您的问题. http://jsfiddle.net/csabatino/uAs6k/9/

<h1>NOW this is working.</h1>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>


<h1>Default fixed 'row' is working, too.</h1>
<div class="row">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>

Answer 2

如果您知道每行的跨度数,则可以使用如下表达式:

.row-fluid [class*="span"]:nth-child(3n+1) {
   margin-left: 0;
}

例如:如果每行有3个跨度,则上面的表达式将从每行的第一个跨度中删除边距.并且下面的一个删除了每行上最后一个元素的margin-right:

.row-fluid [class*="span"]:nth-child(3n+3) {
    margin-right: 0;
}