CSS Twitter Bootstrap - row-fluid 的位置问题

Twitter Bootstrap - Position issue with row-fluid

提问by denislexic

I'm currently building a website using Twitter bootstrap (which is amazing!). I had the layout using:

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

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

Which works great, I have 2 divs per row basically, and we didn't have to include a counter in our loop to get rid of the margins. It was perfect! But we decided to change our mind about having a fixed layout, so I switched from the .row to .row-fluid. And this is when the problem comes.

效果很好，我基本上每行有 2 个 div，而且我们不必在循环中包含一个计数器来消除边距。它是完美的！但是我们决定改变对固定布局的看法，所以我从 .row 切换到 .row-fluid。这就是问题出现的时候。

I know have something like this:

我知道有这样的事情：

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

And the div's with .span6 work well for the first row, but then the margin-left on the .span6 are showing up starting from the second row, therefore the layout is, well, ...not good.

带有 .span6 的 div 在第一行工作得很好，但是 .span6 上的边距从第二行开始显示，因此布局是，嗯，......不好。

I'm surprised it works amazing for fixed layout but not row-fluid. Is there a work-around for this? I used this on all my site, so having to add counters for all of them would...too much work.

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

Here is JS Fiddle: http://jsfiddle.net/denislexic/uAs6k/3/

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

Any help appreciated, thanks.

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

采纳答案by Fred K

If you know the number of span for each row, you can use an expression like this:

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

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

for example: if you have 3 spans for each row, the above expression will removes margin from the first span of each row. And the below one removes the margin-right for the last element on each row:

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

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

回答by Christopher Sabatino

Your 2 examples actually have 4 <div class="span6"></div>within a full-width 'row'... adding up to '24', or twice the width meant for a 'row' or 'row-fluid', based on the 12 column grid setup. You're basically creating dropping floats when there are too many to fit within the parent row's width. (This is also why it seems that 'margin-left:0' is not being applied to your 3rd 'span6', which lookslike it's the first 'span6' of a 2nd row.)

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

In a default/fixed 'row', the nested column's 'span*'s + 'offset*'s will need to be less than or equal to its parent's column 'span*', OR if it's a first-level row, then 12, because the floated 'span*' widths are in pixels.

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

In a flexible/fluid 'row-fluid', the column widths are set by percentage, so each row and nested row can have nested column 'span*'s and 'offset*'s that add up to 12, each time. http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

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

This should solve your issue with the 'row-fluid' setup. http://jsfiddle.net/csabatino/uAs6k/9/

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

回答by luke2012

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

It only removes margin for the first child so you will need to add another class or change span6to have margin-left:0;

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

回答by barula

I solved it by putting an empty div with span12 at the begining, uggly in the code but effective in the gui

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

回答by muhr

I just did this with jQuery instead:

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

and the css:

和CSS：

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

回答by user1637019

If the app can't count elements and divide into rows, removing margin-leftand adding padding-rightworked just fine for me:

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

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

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

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