twitter-bootstrap Bootstrap 响应式设计 Div 重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23868596/
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 responsive design Divs overlap
提问by Shashank
I am a newbie to responsive elements in bootstrap. These two divs whose HTML is given below, in mywebapp ( Ex: http://greenboard.in/noticeDescription.html?noticeId=60) overlap with each other in mobile screens. Resize the browser's window to see the behavior. How should I overcome that behavior?
我是引导程序中响应元素的新手。这两个 div 的 HTML 如下所示，在 mywebapp 中（例如：http://greenboard.in/noticeDescription.html?noticeId=60 ）在移动屏幕中彼此重叠。调整浏览器窗口的大小以查看行为。我应该如何克服这种行为？
<!-- DIV1 -->
<div class = "col-md-12 col-sm-12">
<a href= "/" id="logo-dark"> <img class="img-responsive" width="60" height="60" alt="" src="images/logo-dark-sm.png"> </a>
</div>
<!-- DIV2 -->
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" style="margin-top: 25px;">
<div id="DescriptionWrapper"></div>
</div>
回答by AyB
The css of your logo is:
你的标志的 css 是：
#logo-dark, #logo-light {
top: 0;
left: 0;
position: absolute;
This means your logo is going to stay in the top-left position regardless of the elements around it, that's why your next element is overlapping with the logo.
这意味着无论周围的元素如何，您的徽标都将保持在左上角的位置，这就是您的下一个元素与徽标重叠的原因。
There are two ways you can solve this:
有两种方法可以解决这个问题：
1) Replace the position:absolute;with position:relative;for smaller viewports using media queries.
1）更换position:absolute;与position:relative;使用媒体查询较小的视口。
2)
2)
a)Add <div style="clear:both;"></div>in between the divs
a)<div style="clear:both;"></div>在 div 之间添加
b)Leave more margin space at the second div margin-top: 35px;
b)在第二个 div 处留出更多的边距空间margin-top: 35px;
回答by Carlos E
This can be done with simple bootstrap. On this case divs never overlap
这可以通过简单的引导程序来完成。在这种情况下，div 永远不会重叠
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
</div>
</div>
