Bootstrap grid columns overlapping each other

问题:

I have an issue with Bootstrap's grid layout and the overlapping of columns within it. I'm not sure what the issue is really, any advice would be most appreciated, thanks.

<div class="container">    

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

Screenshot of the grid - http://i.stack.imgur.com/a3YBr.jpg

回答1:

Your grid syntax is incorrect: your first row div has col-md-6, col-md-6, col-md-9 and col-md-3 as children. Bootstrap grid system has 12 columns, not 24.

Maybe try something like this (wrapped col-md-9 and col-md-3 into a new row div):

<div class="container">

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

回答2:

I used your grid syntax on a clear bootply, removed the images and it seems to be working OK. You haven't made jsfiddle or bootply, so it's not possible to help you further without it. Here's what your grid looks like with only text:

Bootply example

Try adding img-responsive class to all images inside columns to prevent them from overflowing columns they are in.

回答3:

If you're trying to achieve a 16x16 grid, your nested column widths are not right:

Start by looking at this section:

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-3"><img src="content/six.png"></div>
            <div class="col-md-9"><img src="content/seven.png"></div>
        </div>

You're nesting a 1/4 column (3/12) in a 3/4 column (9/12). To figure out the final width of the column, multiply them together and get 3/16. You really want a 1/4 (4/16) column. To fix this, you need to divide this (3/4) section into thirds instead of quarters (4/12 = 1/3 and 8/12 = 2/3):

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"><img src="content/six.png"></div>
            <div class="col-md-8"><img src="content/seven.png"></div>
        </div>

To make the issue more obvious, add a background color to the cell containing seven.png. You'd see that the color would fill the empty space so the cell is actually there. The picture is just too narrow to make it obvious.

The same fix is necessary for the bottom half of this section:

        <div class="row">
            <div class="col-md-6"><img src="content/eight.png"></div>
            <div class="col-md-6"><img src="content/nine.png"></div>
        </div>
    </div>

Now you're taking a 3/4 column and splitting in into 1/2 so (multiplying again) you're creating a 3/8 (6/16) column on the left where you want 1/2 (8/16ths) and a 3/8 (6/16) column on the right where you want a 1/4 (4/16ths) and another. Again, the fix is to split the balance into thirds:

        <div class="row">
            <div class="col-md-8"><img src="content/eight.png"></div>
            <div class="col-md-4"><img src="content/nine.png"></div>
        </div>
    </div>

And again if you put a background color behind nine.png, you'll see that it does fill the whitespace.