CODEWITHSUNDEEP
twitter-bootstrap
Shane
Shane

Reputation: 2455

Bootstrap columns overlapping in fluid layout

I've been trying to figure out what is happening with this for quite some time with no luck. I have stripped my code down o the most basic example of what I'm trying a achieve and cannot figure out why my columns are overlapping and not stacking.

The failing jfiddle can be found here. http://jsfiddle.net/rB9Md/

 <div class="container-fluid">
    <div class="row-fluid">
        <div class="span4">
            <div style="border:1px solid black; min-width:400px; width:400px">
                span4
            </div>
        </div>
        <div class="span4">
            <div style="border:1px solid red; min-width:400px; width: 400px">
                span4
            </div>
        </div>
        <div class="span4">
            <div style="border:1px solid green; min-width:400px; width: 400px">
                span4
            </div>
        </div>
    </div>
</div>

Why are the columns not stacking as expected?? I have tried many variations of widths, max-width, min-width in various places with no success. I would assume that once the span4 column shrinks to be smaller than the contents set width it would stack....

Upvotes: 3

Views: 11484

Answers (1)

Alexander Mistakidis
Alexander Mistakidis

Reputation: 3130

http://jsfiddle.net/ZRpSZ/1/

You don't want to use min-width, width styles in this case, if you can avoid it.

Bootstrap's span4 is already going to make that column span 33% (4/12) of the screen width, or collapse if the screen width is too small. When using bootstrap, you want to use the grid system to layout your columns as much as you can. For reference, see this.

If you need the columns to be 400px wide always, you won't be able to get them side by side in most screen widths. So you should consider how responsive you wish to be.

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

When the columns stack, you can set max-width:400px so they stay only that wide.

Upvotes: 4

Related Questions