I have a container-fluid container element, and have been using row as opposed to row-fluid, admittedly out of ignorance.
Now I am trying to replace the row class with row-fluid class, but have run into some questions.
First, I looked at how the row-fluid width is defined in the .less, and it's completely hieroglyphic to me, so would anyone care to explain?
More importantly, when I replace row with row-fluid, the height of the element collapses to 0 requiring me to include the .clearfix class in order for the row-fluid element to grow to contain its children columns. Why is this necessary, i.e. what is being floated and why when I replace row with row-fluid?
I have a container-fluid container element, and have been using row as opposed to row-fluid, admittedly out of ignorance.
Now I am trying to replace the row class with row-fluid class, but have run into some questions.
First, I looked at how the row-fluid width is defined in the .less, and it's completely hieroglyphic to me, so would anyone care to explain?
More importantly, when I replace row with row-fluid, the height of the element collapses to 0 requiring me to include the .clearfix class in order for the row-fluid element to grow to contain its children columns. Why is this necessary, i.e. what is being floated and why when I replace row with row-fluid?
3 Answers
Reset to default 7It depends on what elements you want to know the width of. The row-fluid class itself has a width of 100%. The spans (or columns) have a relative width, set up in such a way that it combines to 100.
On the floating: all columns get floated, this is what makes it fluid. The only height related thing that a row-fluid does is setting min-height: 30px. This makes it by definition strange that anything would collapse to a height of 0.
I'd suspect the styling you've done on top of your old grid is what causes your main problems.
This is what twitter bootstrap says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Well, that is about container not rows, but if that explanation is not enough for you, then this is the short explanation which should make things clear for you.
NOTE: If its version 2, then row-fluid itself is being float: left which would need to be cleared as you say.
This is because Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
Hope this helps :)
Bootstrap 2.x to 3.0 class change Bootstrap 2.x-->.row-fluid and Bootstrap 3.0 -->.row
.row= Bootstrap v2's.row-fluid– cvrebert Commented Sep 5, 2014 at 20:42