Question

我是bootstrap中响应元素的新手。在mywebapp（例如：http://greenboard.in/noticeDescription.html?noticeId=60）下面给出HTML的这两个div在移动屏幕中相互重叠。调整浏览器窗口的大小以查看行为。我该如何克服这种行为？

 <!-- 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>

Answer 1

您的徽标的CSS是：

#logo-dark, #logo-light {
top: 0;
left: 0;
position: absolute;

这意味着您的徽标将保持在左上角位置，无论其周围的元素如何，这就是您的下一个元素与徽标重叠的原因。

有两种方法可以解决这个问题：

1）使用媒体查询将position:absolute;替换为position:relative;以获取较小的视口。

2）

a）在div之间添加<div style="clear:both;"></div>

b）在第二个div margin-top: 35px;

留下更多的边距空间

Answer 2

这可以通过简单的bootstrap来完成。在这种情况下，divs永远不会重叠

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

Bootstrap响应式设计Div重叠

2 个答案: