Div 重叠另一个 div -Bootstrap

Question

首先，我对网络开发还很陌生，bootstrap。

我正在尝试使页面响应，但是当调整浏览器大小时，div 重叠。

这是页面缩小和放大的图片 --- (http://imgur.com/a/sPlsf)

大家可以看到，"main-content"就是上面的div，下面的白色div就是"content"

前 3 张照片 (top-hive) 和后 2 张照片 (bottom-hive) 也在单独的 div。缩小时，这些图片会超出其位置 div。

有人能解释一下解决这个问题的方法吗？

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>S.H.I.E.L.D</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

  </head>
  <body>

    <div class="nav container">
    </div>

    <div class="main-content container">
        <div class="top-hive row">
            <img src="images/hive1.png">
            <img src="images/hive2.png">
            <img src="images/hive3.png">
        </div>

        <div class="bottom-hive row">
            <img src="images/hive4.png">
            <img src="images/hive5.png">
        </div>

    </div>

    <div class="content container">

    </div>

    <div class="footer container">
        <h5>Copyright (2015)</h5>
    </div>





    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS

body {
    background: url(../images/BG_01.png) repeat fixed top center;
    background-size: 100% auto;
}
/*NAV*/
.nav {
    background: url(../images/header_01.png);
    background-position: center;
    height: 417px;
    width: 100%;
    position: relative;
    z-index:2;
}
/*MAIN CONTENT*/
.main-content {
    background: url(../images/CBG_03.png) no-repeat;
    height: 684px;
    background-position: center;
    max-width: 100%;
    text-align: center;
    margin-top: -215px;
    position: relative;
    z-index:1;
}
.top-hive {
    margin-top: 106px;
}
.top-hive img {
    padding: 5px;
}
.bottom-hive {
    margin-top: -60px;
}
.bottom-hive img {
    padding: 5px;
}

/*CONTENT*/
.content {
    background: url(../images/CBG2_03.png) no-repeat;
    height: 621px;
    background-position: center;
    width: 100%;
    text-align: center;
    margin-top: -12px;
}
.text h3 {
    text-transform: uppercase;
    font-size: 2.1em;
}
.text p {
    font-size: 1em;
}
.footer {
    background: #050719 url(../images/footer_02.png)repeat;
    height: 178px;
    width: 100%;
    text-align: center;
    background-position: center;
}

/*FOOTER*/
.footer h5 {
    color: #58a7d9;
    margin-top: 127px;
}

Answer 1

其中一个六边形被较小的浏览器宽度向下推，导致整个东西高为三个六边形，而不是两个。

由于您在 .main-content 上设置了明确的高度，因此它无法增长以包含六角形的新排列。您可以在 .main-content div:

上设置 min-height

.main-content {
    background: url(../images/CBG_03.png) no-repeat;
    min-height: 684px; // min-height
    background-position: center;
    max-width: 100%;
    text-align: center;
    margin-top: -215px;
    position: relative;
    z-index:1;
}

同样，如果您需要高度始终保持不变，您可以对较小的屏幕使用媒体查询并更改较小屏幕上六边形的大小，这样它们就不会换行.

*edit：如果你 post 代码到 jsfiddle or codepen 而不是 imgur link 也会更有帮助，这样我们就可以自己编辑和测试代码。

Div 重叠另一个 div -Bootstrap

Div overlapping another div -Bootstrap

html

css

twitter-bootstrap

responsive-design

overlap