Question

我遇到了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>

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

Answer 1

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

也许尝试这样的事情（将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>

Answer 2

我在清晰的bootply上使用了你的网格语法，删除了图像，它似乎工作正常。你还没有制作过jsfiddle或bootply，所以没有它就无法帮助你。这是你的网格只有文字的样子：

Bootply example

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

Answer 3

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

首先看看这一节：

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

您将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>

要使问题更加明显，请为包含seven.png的单元格添加背景颜色。您会看到颜色会填满空白区域，因此单元格实际上就在那里。这张照片太窄了，不足以让它显而易见。

本节的下半部分需要相同的修复：

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

现在你正在取3/4列然后分成1/2（再次相乘）你在左边创建一个3/8（6/16）列，你想要1/2（8 / 16ths）和右边的3/8（6/16）列，你想要1/4（4/16）和另一个。同样，修复是将余额分成三分之一：

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

如果你在nine.png后面添加背景颜色，你会发现它确实填满了空白。

Bootstrap网格列相互重叠

3 个答案: