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

你好家伙我试图让bootstrap网格系统在对方有多行，它工作正常，直到它崩溃到移动大小。当它的移动崩溃时，我的一个divs消失了。它基本上成为我屏幕右侧更大的div的一部分。这个问题开始后面768px screen size。这里是代码：
HTML：Bootstrap 4网格系统div在崩溃时消失

<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

来源

2017-03-03 Zvezdas1989

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

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

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

来源

2017-03-03 03:37:49 ZimSystem

非常感谢你，这很好。还有一个问题p-0，意味着填充0？并使用m-0将这个边界设置为0？ – Zvezdas1989

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

来源

2017-03-03 01:06:45 neophyte

我已经试过了COL-SM-6 COL-XS-6但也有工作，我已经更新codepen https://codepen.io/Karadjordje/pen/LWNLzN可以核实。 – Zvezdas1989

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

回答

相关问题