Bootstrap网格列重叠

Question

Bootstrap网格列重叠

twitter-bootstraptwitter-bootstrap-3grid

16

我在使用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

- kingprawn123

1

你的网格语法看起来正确，你确定没有其他样式会导致问题吗？ - Maciej Gurban

1

感谢@Maciej，没有额外的样式（唯一引用的是bootstrap.min.css）。 - kingprawn123

3个回答

3

我在一个干净的bootply上使用了你的网格语法，删除了图片，看起来工作正常。如果没有jsfiddle或bootply，就不可能在没有这些东西的情况下帮助你。这是只有文本的网格的样子：Bootply示例。尝试在列内的所有图像中添加img-responsive类，以防止它们溢出所在的列。

- Maciej Gurban

谢谢@Maciej Gurban，我很快会在bootply或jsfiddle上设置它，我可以看到它将使帮助过程更加流畅和有效！我现在会尝试img-responsive类。再次感谢 :) - kingprawn123

0

如果您想要实现一个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/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后面加上背景颜色，你会发现它确实填充了空白处。

- claytond

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Getz · Accepted Answer

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

也许可以尝试这样做（将 col-md-9 和 col-md-3 包装在一个新的 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>