Bootstrap 4网格系统div在崩溃时消失答案

【问题标题】：Bootstrap 4 grid system div disappears on collapseBootstrap 4网格系统div在崩溃时消失
【发布时间】：2017-03-03 11:37:49
【问题描述】：

大家好，我正在尝试制作具有多行的引导网格系统，它可以正常工作，直到它折叠到移动大小。当它为移动设备折叠时，我的一个 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

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

问题是因为col-md-7 上的height: 800px。

另外，代码没有正确使用 Bootstrap 网格。例如，col-md-7 的直接子级应该是单个 row 和 col-md-12，下面是 2 个 col-md-6，而不是 container-fluid。

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

【讨论】：

非常感谢您的出色工作。还有一个问题 p-0，表示填充 0 吗？并且使用 m-0 会将边距设置为 0 吗？

【解决方案2】：

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

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

【讨论】：

我已经尝试过 col-sm-6 col-xs-6 但都没有用我已经更新了 codepen codepen.io/Karadjordje/pen/LWNLzN 你可以检查一下。