row-fluid vs row in twitter bootstrap

Question

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?

Solution 1

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.

Solution 2

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

Solution 3

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

Comments

[cvrebert]

Bootstrap v3's .row = Bootstrap v2's .row-fluid

[gpgekko]

Bootstrap 3 doesn't have a row-fluid class, so I suspect he is asking about Bootstrap 2.

[Derek]

it seems strange that i got away with using row-fluid, since i just checked the .css file and it's not defined even though the layout is working, so i guess it just interprets row-fluid as row or something? anyways, thanks for your input, and my question is solved on account of row-fluid not existing. thank you!

[Rishabh Shah]

@gpgekko Yes it would be for version 2 but I found the explanation for the clearfix thing in docs of version 3, so I just linked that in answer as well :)

[gpgekko]

@Derek So you are talking about Bootstrap 3 then? If that's the case, retag the question to twitter-bootstrap-3 please.

[Derek]

I'm a little new here. But since the heart of the issue lies in the fact that row-fluid doesn't exist in BS3, should I still retag?