I\'ve been playing with the Twitter Bootstrap grid system, and noticed that I could mix row
and row-fluid
in the following way:
The main purposes of .row-fluid
is to alter the styling of .spanX
elements.
Within .row
, .spanX
elements have a fixed pixel width. This width may change based on viewport dimensions if you're using the responsive stylesheet.
Within .row-fluid
, however, .spanX
elements have a percentage-based width. One of the nice side effects here is that a .row-fluid
element can be placed inside any element, and it will simply size itself to 100% of the container's width. Likewise, any .spanX
elements within this fluid row will size themselves accordingly, so that each 'column' is roughly one 12th (accounting for gutter width) of the .row-fluid
container, regardless of the row's width or location in the DOM.
If there is any area of your page that you want to split into some set number of columns, .row-fluid
can be used.