CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
no0ne
no0ne

Reputation: 2679

Bootstrap2 container max-width

I need to build a page with .container having max-width:750px; I also will need to have several rows of .span4 generated just by adding to the same .row

If I add max-width to .container then the .spans stops functioning correctly. If I use .row-fluid I get the correct width of the columns but on the first line they line up correctly and the second line they don't.

<style>
.container { max-width:750px;}
</style> 

<div class="container">
    <div class="row">
        <div class="span4" style="background-color:#F00">1</div>
        <div class="span4" style="background-color:#9F0">2</div>
        <div class="span4" style="background-color:#FF0">3</div>
        <div class="span4" style="background-color:#939">4</div><!-- make new row -->
        <div class="span4" style="background-color:#3CF">5</div> 
        <div class="span4" style="background-color:#F00">6</div> 

    </div>  
</div>



<div class="container" style="margin-top:50px">
    <div class="row-fluid">
        <div class="span4" style="background-color:#F00">1</div>
        <div class="span4" style="background-color:#9F0">2</div>
        <div class="span4" style="background-color:#FF0">3</div>
        <div class="span4" style="background-color:#939">4</div><!-- make new row -->
        <div class="span4" style="background-color:#3CF">5</div>
        <div class="span4" style="background-color:#F00">6</div> 

    </div>  
</div>

I understand the 12 column CSS grid logic of bootstrap. The problem is not that my spans don't add up to 12.

LIVE PREVIEW HERE

Anyone?

Upvotes: 0

Views: 142

Answers (1)

Dharmesh Patel
Dharmesh Patel

Reputation: 1891

That's because every span except the first one in row takes margin-left. To solve this either remove margin-left from the fourth span using custom CSS or you can have separate row class for every row. I suggest having separate row for each row is better, still it's your decision.

I suggest this:

<div class="container">
    <div class="row-fluid">
        <div class="span4" style="background-color:#F00">1</div>
        <div class="span4" style="background-color:#9F0">2</div>
        <div class="span4" style="background-color:#FF0">3</div>
    </div>
    <div class="row-fluid">
        <div class="span4" style="background-color:#939">4</div><!-- make new row -->
        <div class="span4" style="background-color:#3CF">5</div> 
        <div class="span4" style="background-color:#F00">6</div> 
    </div>  
</div>

Upvotes: 1

Related Questions