Twitter Bootstrap - Position issue with row-fluid - css

Question

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>
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.
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.
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.
Here is JS Fiddle:
http://jsfiddle.net/denislexic/uAs6k/3/
Any help appreciated, thanks.

Answer 1

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 looks like it's the first 'span6' of a 2nd row.)
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.
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
This should solve your issue with the 'row-fluid' setup.
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

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:
.row-fluid [class*="span"]:nth-child(3n+3) {
margin-right: 0;
}

Answer 3

.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 span6 to have margin-left:0;

Answer 4

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

Answer 5

If the app can't count elements and divide into rows, removing margin-left and adding padding-right worked just fine for me:
.gal [class*="span"] {margin-left:0; padding-right:20px;}
http://jsfiddle.net/uAs6k/116/

Answer 6

I just did this with jQuery instead:
$(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:
.alpha { margin-left: 0 !important; }