Question

大家好，我正在尝试制作彼此多行的自举网格系统，它可以正常运行，直到它崩溃到移动大小。当它为移动设备折叠时，我的一个div消失了。它基本上成为我屏幕右侧较大div的一部分。问题从768px screen size开始。以下是代码：
HTML：

<section id="changeImageHover" class="container-fluid">
<div class="row">
 <div class="col-md-7">
  <div class="container-fluid topLayer changeImageOne">
    <img src="https://placebear.com/716/400" alt="white image">
    <h3>wwwwwwwwwwwwww</h3>
    <p>asdasdasdsadasd</p>
  </div>
  <div class="row bottomLayer">
    <div class="col-md-6 changeImageTwo">
      <img src="https://placebear.com/358/400" alt="mouth">
      <span>asdddddddddd</span>
    </div>
    <div class="col-md-6 changeImageThree">
      <img src="https://placebear.com/358/400" alt="blue image">
      <h3>asdasdasd</h3>
      <p>asdasdasdsad</p>
    </div>
  </div>
 </div>

 <div class="col-md-5">
  <img id="changeThisImage" src="https://placebear.com/511/800" alt="girl pink background">
 </div>
</div>
</section>

我的第二个col-md-6是消失的那个。它有班级changeImageThree SCSS：

#changeImageHover {
    padding: 0;
    margin: 0;
    .row {
        margin: 0;
        padding: 0;
        .col-md-7{
            cursor: pointer;
            padding: 0;
            margin: 0;
            height: 800px;
            img {
                height: 400px;
                width: 100%;
            }
            h3 {
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                font-size: 25px;
                position: absolute;
                top: 50%;
                left:19.5%;
                transform: translate(-19.5%,-50%);
            }
            p {
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                font-size: 14px;
                padding: 0;
                margin: 0;
                position: absolute;
                top: 56%;
                left:35%;
                transform: translate(-35%,-60%);
            }
            .container-fluid {
                padding: 0;
                margin: 0;
            }
            .changeImageThree {
                height: 400px;
            }
            .col-md-6 {
                padding: 0;
                margin: 0;
                h3 {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 20px;
                    position: absolute;
                    top: 50%;
                    left: 38%;
                    transform: translate(-38%,-50%);
                }
                p {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 14px;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    top: 56%;
                    left:19%;
                    transform: translate(-17%,-50%);
                }
                span {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 14px;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    top: 54%;
                    left:36%;
                    transform: translate(-36%,-54%);
                }
            }
        }
        .col-md-5 {
            height: 800px;
            padding: 0;
            margin: 0;
            img {
                height: 800px;
                width: 100%;
            }
        }
    }
}

以下是codepen，以便您更好地了解我的问题https://codepen.io/Karadjordje/pen/LWNLzN

Answer 1

问题在于height: 800px上的col-md-7。

此外，代码未正确使用Bootstrap网格。例如，col-md-7的直系子女应该是一个row col-md-12，而col-md-6下面的container-fluid而不是plotOptions: { bar: { grouping: false, borderWidth: 0 } }, series: [{ name: 'Tokyo', data: [45.9, 71.5, 106.4], color: 'red' }, { name: 'Tokyo', data: [45.9, 71.5, 106.4], color: 'blue', threshold: 50, negativeColor: 'transparent' }]。

更新：https://codepen.io/anon/pen/GWZMVj

Answer 2

你的div消失了，因为你正在使用col-md-6 only。对于小型设备的响应能力，请使用col-xs-*

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
       <style type="text/css">
   #changeImageHover {
    padding: 0;
    margin: 0;
    .row {
        margin: 0;
        padding: 0;
        .col-md-7{
            cursor: pointer;
            padding: 0;
            margin: 0;
            height: 800px;
            img {
                height: 400px;
                width: 100%;
            }
            h3 {
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                font-size: 25px;
                position: absolute;
                top: 50%;
                left:19.5%;
                transform: translate(-19.5%,-50%);
            }
            p {
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                font-size: 14px;
                padding: 0;
                margin: 0;
                position: absolute;
                top: 56%;
                left:35%;
                transform: translate(-35%,-60%);
            }
            .container-fluid {
                padding: 0;
                margin: 0;
            }
            .changeImageThree {
                height: 400px;
            }
            .col-md-6 {
                padding: 0;
                margin: 0;
                h3 {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 20px;
                    position: absolute;
                    top: 50%;
                    left: 38%;
                    transform: translate(-38%,-50%);
                }
                p {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 14px;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    top: 56%;
                    left:19%;
                    transform: translate(-17%,-50%);
                }
                span {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 14px;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    top: 54%;
                    left:36%;
                    transform: translate(-36%,-54%);
                }
            }
        }
        .col-md-5 {
            height: 800px;
            padding: 0;
            margin: 0;
            img {
                height: 800px;
                width: 100%;
            }
        }
    }
}
       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       <section id="changeImageHover" class="container-fluid">
<div class="row">
 <div class="col-md-7">
  <div class="container-fluid topLayer changeImageOne">
    <img src="https://placebear.com/716/400" alt="white image">
    <h3>wwwwwwwwwwwwww</h3>
    <p>asdasdasdsadasd</p>
  </div>
  <div class="row bottomLayer">
    <div class="col-md-6 col-xs-6 changeImageTwo">
      <img src="https://placebear.com/358/400" alt="mouth">
      <span>asdddddddddd</span>
    </div>
    <div class="col-md-6 col-xs-6 changeImageThree">
      <img src="https://placebear.com/358/400" alt="blue image">
      <h3>asdasdasd</h3>
      <p>asdasdasdsad</p>
    </div>
  </div>
 </div>

 <div class="col-md-5">
  <img id="changeThisImage" src="https://placebear.com/511/800" alt="girl pink background">
 </div>
</div>
</section>
</body>
</html>

＆＃13;

崩溃后，Bootstrap 4网格系统div消失

2 个答案: