Twitter bootstrap 引导网格列彼此重叠

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

---

网格的屏幕截图-

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

也许可以尝试类似的方法（将col-md-9和col-md-3包装到一个新行div中）：

---

我在一个清晰的引导层上使用了您的网格语法，删除了图像，它似乎工作正常。您还没有创建JSFIDLE或bootply，因此没有它就无法进一步帮助您。以下是仅包含文本的网格的外观：

---

尝试向列中的所有图像添加img响应类，以防止它们溢出所处的列。

如果您试图实现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>

        <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/16），在右侧创建一个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

后面添加背景色，您会看到它确实填充了空白。

您的网格语法看起来正确，您确定没有任何其他样式会导致问题吗？谢谢@Maciej，没有其他样式（唯一引用的是bootstrap.min.css）谢谢@Getz，我已经将代码与上面的代码对齐，并确保每行加起来为12行。图像似乎在正确的位置，现在没有相互重叠，但图像没有填充div，因此现在有空的空间！有什么想法吗？嗯，如果你想保持图像的比例，这听起来很难（也许可以检查这个问题：）。否则，您可以在CSS中将图像的高度和宽度固定为100%。如果你做不到，你可以问一个关于stackOverflow的新问题；）再次感谢@Getz，它几乎像是img不适合列的大小，我想知道是否有办法限制列的物理大小？按大小，你是指宽度还是高度？我认为宽度似乎是问题所在-I.imgur.com/NwDnntP.png-@GetzThank you@Maciej Gurban，我很快会将其设置在引导或jsfiddle上，我可以看到它将如何使帮助过程更加精简和有效！我现在要尝试img响应课程。再次感谢：）

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