Twitter Bootstrap - 行流的位置问题 [英] Twitter Bootstrap - Position issue with row-fluid

问题描述

我目前正在使用Twitter的引导（这是惊人的！）建立一个网站。
我的布局使用：

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

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

其中的效果很好，基本上每行有2个div，计数器在我们的循环中摆脱边缘。它是完美的！但我们决定改变我们的想法，有一个固定的布局，所以我从.row切换到.row流体。这是当问题来临。

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.

我知道有这样的东西：

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

和.span6的div在第一行运行良好，左侧的.span6从第二行开始显示，因此布局是，好，...不好。

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.

我<强>令人惊讶的是固定布局，但不流行惊人。这有办法吗？

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.

这里是JS Fiddle：

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

任何帮助感谢，谢谢。

推荐答案

如果知道每行的span数，像这样：

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

例如：如果每行有3个跨度，从每行的第一个span中删除边距。下面的代码删除了每行最后一个元素的margin-right：

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:

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

这篇关于Twitter Bootstrap - 行流的位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！