twitter-bootstrap Bootstrap 网格列相互重叠

Bootstrap grid columns overlapping each other

提问by kingprawn123

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.

我对 Bootstrap 的网格布局和其中的列重叠有疑问。我不确定问题到底是什么，任何建议将不胜感激，谢谢。

<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

网格的屏幕截图 - http://i.stack.imgur.com/a3YBr.jpg

采纳答案by Getz

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.

您的网格语法不正确：您的第一行 div 将 col-md-6、col-md-6、col-md-9 和 col-md-3 作为子项。Bootstrap 网格系统有 12 列，而不是 24 列。

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

也许尝试这样的事情（将 col-md-9 和 col-md-3 包装到一个新的行 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>

回答by Maciej Gurban

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 上使用了你的网格语法，删除了图像，它似乎工作正常。您还没有制作 jsfiddle 或 bootply，因此没有它就不可能进一步帮助您。以下是只有文本的网格：

Bootply example

Bootply 示例

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

尝试将 img-responsive 类添加到列内的所有图像，以防止它们溢出所在的列。

回答by claytond

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

如果您尝试实现 16x16 网格，则嵌套列宽不正确：

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

您将 1/4 列 (3/12) 嵌套在 3/4 列 (9/12) 中。要计算出该列的最终宽度，请将它们相乘得到 3/16。您确实需要 1/4 (4/16) 列。要解决此问题，您需要将此 (3/4) 部分分成三份而不是四份（4/12 = 1/3 和 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.

为了使问题更加明显，请为包含seven.png. 您会看到颜色会填充空白区域，因此单元格实际上就在那里。图片太窄了，看不出来。

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:

现在你要取一个 3/4 列并分成 1/2，所以（再次相乘）你在你想要 1/2（8/16）的左边创建一个 3/8（6/16）列和右侧的 3/8 (6/16) 列，您需要 1/4 (4/16ths) 和另一个。同样，解决方法是将余额分成三份：

        <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.

同样，如果您在 后面放置背景颜色nine.png，您会看到它确实填充了空白。