Bootstrap网格列彼此重叠 [英] Bootstrap grid columns overlapping each other

问题描述

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

解决方案

div>

你的网格语法不正确：你的第一行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> 
  

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>

Screenshot of the grid - http://i.stack.imgur.com/a3YBr.jpg

解决方案

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.

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屋！