Twitter-bootstrap: How to use row-fluid class properly?

Question

I have a problem understanding how row-fluid class works. According to the documentation it adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.

However looking at this example here : https://duelify.com/

Strangely enough the first three article headers fit on first row. Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this 'side effect'.

Why aren't the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?

Answer 1

In your case, proper code will be like

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

etc...

In every row-fluid class maximum sum of span classes must be up to 12. Span classes have left margin. Only last child in one row-fluid don't have left margin.

Look again now at examples on Twitter Bootstrap documentation. "For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent)."