Bootstrap 网格列相互重叠

Posted 2023-03-05

【中文标题】Bootstrap 网格列相互重叠

【英文标题】：Bootstrap grid columns overlapping each other

【发布时间】：2014-07-27 09:28:13

【问题描述】：

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

【问题讨论】：

您的网格语法看起来是正确的，您确定没有任何额外的样式会导致问题吗？

感谢@Maciej，没有其他样式（唯一引用的是 bootstrap.min.css）

【参考方案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>

【讨论】：

感谢@Getz，我已将代码与上面对齐，并确保每行加起来为 12。图像似乎在正确的位置，现在没有相互重叠，而是图像没有填满 div，所以现在有空格！有什么想法吗？

嗯，如果你想保持图像的比例，这听起来很困难（也许检查那个问题：***.com/questions/1891857/…）。否则，您可以在 CSS 中将图像的高度和宽度固定为 100%。如果你做不到，你可以在 *** 上提出一个新问题；）

再次感谢@Getz，好像img不适合列大小，不知道有没有办法限制列的物理大小？

你说的是宽度还是高度？

它的宽度似乎是我认为的问题 - i.imgur.com/NwDnntP.png - @Getz

【参考方案2】：

我在清晰的引导程序上使用了您的网格语法，删除了图像，它似乎工作正常。您还没有制作 jsfiddle 或 bootply，因此没有它就无法进一步帮助您。这是您的网格仅包含文本的样子：

Bootply example

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

【讨论】：

谢谢@Maciej Gurban，我很快就会在 bootply 或 jsfiddle 上设置它，我可以看到它将如何使帮助过程更加简化和有效！我现在将尝试一个 img-responsive 课程。再次感谢:)

【参考方案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/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>

如果你在nine.png 后面加上背景颜色，你会看到它确实填充了空白。