twitter-bootstrap 引导列重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37841348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap columns overlapping
提问by goofenhour
I have an issue with bootstrap's grid layout. My columns are overlapping one another when I resize the screen to a smaller layout.
我对引导程序的网格布局有问题。当我将屏幕调整为较小的布局时，我的列彼此重叠。
I'm not sure what the issue is.
我不确定是什么问题。
Here is a picture of what is going on:
这是正在发生的事情的图片：
Here is my code
这是我的代码
<div class='container-fluid'>
<div class="row"> <!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'> <!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row"> <!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<img src="vulcan.jpg" alt="vehicle image" width='391'/>
</div>
<div class='row'>
<button type='submit'>
<img src="[email protected]" alt="book now">
</button>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE -->
<div class='row'>
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
<div class='row'>
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
<div class='row'>
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS,
WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN
ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU
SOME HELP WITH LIFTING OR YARDWORK I AM YOUR GUY. BOOK NOW TO CONTACT
ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div> <!-- end 3 -->
<hr>
</div> <!-- end wrap -->
采纳答案by dippas
According to Bootstrap Docs, for each .rowyou need to have a .col-*-*as direct child but you don't have it in a few of them. Which cause the overflow.
根据Bootstrap Docs，对于每一个.row你都需要有一个.col-*-*直接的孩子，但你在其中的几个中没有。导致溢出。
Plus don't use the html tag width, it is deprecated. use class="img-responsive"from bootstrap to achieve max-width:100%
另外不要使用 html 标签width，它已被弃用。使用class="img-responsive"from bootstrap 来实现max-width:100%
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class="row">
<!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'>
<!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row">
<!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<div class="col-xs-12">
<img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" />
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<button type='submit'>
<img src="[email protected]" alt="book now">
</button>
</div>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;">
<!-- RIGHT SIDE -->
<div class='row'>
<div class="col-xs-12">
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I
AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div>回答by Rick
I believe your problem is that you have many elements with the "row" class that don't have any columns in them. The hierarchy goes container > row > col. Without a column, there is no need for anything to be declared a row, and it affects the layout in unusual ways without them.
我相信您的问题是您有许多带有“行”类的元素，其中没有任何列。层次结构是容器 > 行 > 列。没有列，就不需要将任何内容声明为行，如果没有列，它会以不寻常的方式影响布局。
Another problem is your image. Remove the "width" attribute, and add the following class attribute: class="img-responsive". See the Images sectionof the bootstrap docs for details.
另一个问题是你的形象。删除“width”属性，并添加以下类属性：class="img-responsive"。有关详细信息，请参阅引导程序文档的图像部分。
回答by Jamshaid Kamran
In my case, I was using box-sizing: content-box;for all my elements in css. That is why padding was creating problems with overall computed width of the elements. So, I changed it to box-sizing: border-box;from box-sizing: content-box;
就我而言，我box-sizing: content-box;在 css 中使用了所有元素。这就是为什么填充会导致元素的整体计算宽度出现问题。所以，我把它改为box-sizing: border-box;从box-sizing: content-box;
Ref:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing
参考：https :
//getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing
