CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3styling
Plexus81
Plexus81

Reputation: 1251

columns inside columns don´t fill the width

I've searched for a solution but can't find any..

I'm using Bootstrap and I have columns inside columns, but it seams like I'm missing something. See the example on jsfiddle to get more info:

jsfiddle example

    <div class="row">
    <div class="yellow col-xs-4">

    </div>
    <div class="green col-xs-4">

    </div>

    <div class="orange col-xs-4">

    </div>

How do I get the .problem columns to fit like these over... (take full width)

    <div class="height grey col-xs-8">        
        <div class="yellow col-xs-4 problem">problem</div>
        <div class="green col-xs-4 problem">problem</div> 
    </div>
    <div class="height grey col-xs-4">
        <div class="orange col-xs-4 problem">problem</div>  
    </div>
</div>

Upvotes: 1

Views: 103

Answers (3)

Ennui
Ennui

Reputation: 10190

You need to nest columns inside of other columns within a div.row. Also, when nesting columns, you still are working with a fluid grid of 12 columns inside its parent. Here is updated markup:

<div class="container">
    <div class="row">
        <div class="yellow col-xs-4">           
        </div>
        <div class="green col-xs-4">
        </div>
        <div class="orange col-xs-4">
        </div>  
    </div>
    <div class="row">      
        <div class="height grey col-xs-8"> 
            <div class="row">
                <div class="yellow col-xs-6 problem">problem, this column should have the same width as over</div>
                <div class="green col-xs-6 problem">problem, this column should have the same width as over</div> 
            </div>
        </div>
        <div class="height grey col-xs-4">
            <div class="row">
                <div class="orange col-xs-12 problem">problem, this column should have the same width as over</div>  
            </div>
        </div>
    </div>
</div>

Basically what was done here is adding nested rows inside of each column that contains columns inside of it, and changing the col-xs-# column class values appropriately so that each parent container adds up to 12 columns. It looks like you should spend a little more time familiarizing yourself with the fluid grid and how nesting grids inside the grid works.

JSFiddle

Official Bootstrap CSS documentation for nesting grid elements

Edit: to update JSFiddle and add .container wrapper div

Upvotes: 2

kushpf
kushpf

Reputation: 1098

The nested columns should add up to 12 for full width.

<div class="height grey col-xs-12">        
    <div class="yellow col-xs-4 problem">problem, this column should have the same width as over</div>
    <div class="green col-xs-4 problem">problem, this column should have the same width as over</div>
    <div class="orange col-xs-4 problem">problem, this column should have the same width as over</div>  
</div>

Upvotes: 0

J. A. Streich
J. A. Streich

Reputation: 1702

http://jsfiddle.net/52VtD/3172/

The columns, even nested, should sum to 12. It is a good idea to wrap nested columns in their own row div, though it might not be completely necessary.

<div class="row">
    <div class="yellow col-xs-4">

    </div>
    <div class="green col-xs-4">

    </div>

    <div class="orange col-xs-4">

    </div>        
<br/>        
    how to I get the problem colums to fit like those over..
    <div class="height grey col-xs-8">
        <div class="row">
          <div class="yellow col-xs-6 problem">problem, this column should have the same width as over</div>
          <div class="green col-xs-6 problem">problem, this column should have the same width as over</div>
        </div>
    </div>
    <div class="height grey col-xs-4">
        <div class="row">
          <div class="orange col-xs-12 problem">problem, this column should have the same width as over</div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions