9

我目前正在使用 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 从第二行开始出现，因此布局，嗯，......不好。

我很惊讶它对于固定布局但不是 row-fluid 效果惊人。有解决办法吗？我在我所有的网站上都使用了这个，所以必须为所有这些添加计数器会......太多的工作。

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

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

4

6 回答 6

32

根据 12 列网格设置，您的 2 个示例实际上<div class="span6"></div>在一个全宽“行”内有 4 个......加起来是“24”，或者是“行”或“行流体”宽度的两倍。当有太多无法容纳在父行的宽度内时，您基本上是在创建下降浮动。（这也是为什么 'margin-left:0' 似乎没有应用于您的第三个 'span6'，看起来它是第二行的第一个 'span6'。）

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

在灵活/流动的 'row-fluid'中，列宽是按百分比设置的，因此每行和嵌套行可以有嵌套列 'span*' 和 'offset*' 每次加起来为 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>
于 2012-05-24T06:03:46.510 回答
7

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

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

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

.row-fluid [class*="span"]:nth-child(3n+3) {
    margin-right: 0;
}
于 2013-05-08T16:06:54.827 回答
3 
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

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

于 2012-05-06T10:34:33.290 回答
1

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

于 2013-10-14T14:35:42.360 回答
0

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

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

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

于 2012-09-18T05:19:02.593 回答
0

我只是用 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; }
于 2013-09-29T21:45:28.670 回答