css - Twitter Bootstrap-行流体的位置问题

我目前正在使用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上的左边距从第二行开始出现，因此布局是……不好。

我感到惊讶，它对于固定布局的效果很好，但对行流体却不起作用。是否有解决方法？我在所有网站上都使用了此功能，因此必须为所有网站添加计数器会导致工作量过多。

这是JS Fiddle:
http://jsfiddle.net/denislexic/uAs6k/3/

任何帮助表示赞赏，谢谢。

最佳答案

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

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