Bootstrap css - div高度和溢出

Question

我的朋友的网站有问题，我无法解决。如果你能帮助，我会很高兴。 问题是：

我的引导div不保持高度，并在下面的div，特别是在平板电脑/手机响应版本。也许它会更容易，如果我给你的地址：

http://trido.io/index3.html

和我谈论的代码是：

<section id="download" class="download bg-primary text-center"> 
    <div class="container"> 


      <div class='col-md-1'> 
       <!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> --> 
      </div> 


     <div class='col-md-4'> 

      <div class="row"> 

       <div class='col-md-1'> 
       </div> 


       <div class='col-md-9'> 

        <p align="center">TriDo - Do a chain of three!</p><br> 
        <p>Arrange your balls in order from 1 to 3: 
        horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br> 
       </div> 
      </div> 


      <div class="row"> 

       <ul> 
        <li>Multiplayer<li> 
        <li>Endless single-player mode<li> 
        <li>Game Center leaderboards<li> 
        <li>Game Center Achievements<li> 
       </ul> 



      </div> 


     </div> 

     <div class='col-md-1'> 

     </div> 

      <div class="col-md-5"> 

       <div class="device-container"> 
        <div class="device-mockup iphone6 portrait black"> 
         <div class="device"> 
          <div class="screen"> 

             <!-- <video width="300" height="534" controls> --> 
              <video width="270" height="480" controls> 

              <source src="TrailerDoTel.mp4" type="video/mp4"> 
              <source src="TrailerDoTel.ogg" type="video/ogg"> 

              </video> 

           <div class="button"> 
           </div> 
         </div> 
        </div> 
       </div> 

      </div> 
      </div> 

      <div class='col-md-0.5'> 
       <!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> --> 
      </div> 

     </div> 

</section> 

Answer 1

这是因为你的<div class="device-mockup iphone6 portrait black">设置为位置absolute这需要该元素不在文档流中，因此其内容不会影响DOM中的其他元素。

如果将其设置为position: relative;，它将不再与其下面的div重叠。

或者你可以给你的.device-container一个静态的高度，像height: 676px;