Twitter Bootstrap - 行流体的位置问题

Question

我目前正在使用 Twitter 引导程序构建一个网站（这太棒了！）。 我的布局使用：

<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 小提琴： http://jsfiddle.net/denislexic/uAs6k/3/

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

Answer 1

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

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

例如：如果每行有 3 个跨度，则上述表达式将从每行的第一个跨度中删除边距。下面的删除了每一行最后一个元素的边距：

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

Answer 2

我通过在开头放置一个带有 span12 的空 div 来解决它，在代码中丑陋但在 gui 中有效

Answer 3

我只是用 jQuery 来代替：

$(document).ready(function(){
    function doFluidFirstSpan() {
        var top = $('.thumbnails > li:first-child').position().top;
        $('.thumbnails > li').each(function(){
            if($(this).position().top > top) {
                $(this).addClass("alpha");
                top = $(this).position().top;   
            }
        }); 
    }

    doFluidFirstSpan();
}

和css：

.alpha { margin-left: 0 !important; }

Answer 4

如果应用程序无法计算元素并分成行，那么删除 margin-left 并添加 padding-right 对我来说效果很好：

.gal [class*="span"] {margin-left:0; padding-right:20px;}

http://jsfiddle.net/uAs6k/116/

Answer 5

根据12列网格设置。当有太多无法容纳在父行的宽度内时，您基本上是在创建下降浮动。 （这也是为什么 'margin-left:0' 似乎没有应用于您的第三个 'span6'，这看起来就像它是第二行的第一个 'span6'。 )

在默认/固定的“行”中，嵌套列的“跨度*”+“偏移*”将需要小于或等于其父列的“跨度*”，或者，如果它是一级行，则为 12，因为浮动的 'span*' 宽度以像素为单位。

在灵活/流畅的'row-fluid'中，列宽是按百分比设置的，所以每一行和嵌套行都可以有嵌套列'span*'和'offset*'s每次加起来是 12。 http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

这应该可以解决您的“行流体”设置问题。 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 6

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

它只会删除第一个孩子的边距，因此您需要添加另一个类或将 span6 更改为 margin-left:0;