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

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

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

在灵活/流畅的'row-fluid'中，列宽按百分比设置，因此每行和嵌套行可以有嵌套列'span *'和'offset *'s每次加起来最多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个跨度，则上面的表达式将从每行的第一个跨度中删除边距。下面的一行删除了每行最后一个元素的边距：

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

Answer 3

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

它只会删除第一个孩子的保证金，因此您需要添加其他课程或更改span6才能拥有margin-left:0;

Answer 4

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

Answer 5

如果应用无法计算元素数并划分为行，则移除margin-left并添加padding-right对我来说效果很好：

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

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

Answer 6

我只是用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; }

Twitter Bootstrap - 行流体的位置问题

6 个答案: