Bootstrap网格列相互重叠

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>