Bootstrap 网格列相互重叠 [英] Bootstrap grid columns overlapping each other

问题描述

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

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.

<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

推荐答案

您的网格语法不正确:您的第一行 div 有 col-md-6、col-md-6、col-md-9 和 col-md-3 小时候.Bootstrap 网格系统有 12 列，而不是 24 列.

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.

也许可以尝试这样的事情(将 col-md-9 和 col-md-3 包装到一个新的行 div 中):

Maybe try something like this (wrapped col-md-9 and col-md-3 into a new 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>

这篇关于Bootstrap 网格列相互重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！