Twitter Bootstrap - Position issue with row-fluid

Answer 1

.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 2

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

Answer 3

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

Answer 4

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

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