CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptwitter-bootstrap-3
Derek
Derek

Reputation: 722

row-fluid vs row in twitter bootstrap

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?

Upvotes: 14

Views: 32750

Answers (3)

Rishabh Shah
Rishabh Shah

Reputation: 679

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

Upvotes: 3

Indranil
Indranil

Reputation: 165

Bootstrap 2.x to 3.0 class change Bootstrap 2.x-->.row-fluid and Bootstrap 3.0 -->.row

Upvotes: 2

gpgekko
gpgekko

Reputation: 3616

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

Upvotes: 7

Related Questions