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;