Boostrap列碰撞

每當我將我的網站大小調整爲320 x 480的移動視圖時，我的兩列填充文本會相互碰撞並混合文本。我試過沒有使用「container-clearfix」列，但它沒有解決我的問題。Boostrap列碰撞

第一張圖片顯示的網站文字的外觀上320×480的小型移動設備image 1

這裏是JS小提琴：在媒體查詢http://jsfiddle.net/52VtD/14124/

#big-image { 
 
    position: relative; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 600px; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.col-md-12 { 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
} 
 
#text-four { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    bottom: 450px; 
 
    vertical-align: middle; 
 
    left: 20%; 
 
} 
 
#text-four-p { 
 
    position: absolute; 
 
    overflow: auto; 
 
    bottom: 830%; 
 
    left: 15%; 
 
    text-align: center; 
 
} 
 
.US { 
 
    position: absolute; 
 
    overflow: auto; 
 
    bottom: 250%; 
 
    left: 15%; 
 
    text-align: center; 
 
} 
 
.EU { 
 
    position: absolute; 
 
    overflow: auto; 
 
    bottom: 250%; 
 
    right: 15%; 
 
    text-align: center; 
 
} 
 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
 
    #text-four, 
 
    #text-four-p { 
 
    display: none; 
 
    } 
 
}

<div class="row"> 
 

 
    <img src="image/4.jpg" class="img-responsive" id="big-image"> 
 

 

 
    <div class="col-sm-12"> 
 
    <div class="carousel-caption"> 
 
     <h3 id="text-four"> HOW TO WATCH SHORTSHD (US) OR SHORTSTV (EUROPE)</h3> 
 
     <p id="text-four-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum lorem. Nullam molestie lectus eros, vel ornare mi</p> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
 
     <div class="carousel-caption"> 
 
      <div class="US"> 
 
      <h2> ShortsHD (US)</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus. 
 
       Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante 
 
       pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-12 col-md-6 col-pull-6"> 
 
     <div class="carousel-caption"> 
 
      <div class="EU"> 
 
      <h2> ShortsTV (EU)</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus. 
 
       Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante 
 
       pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-08 ZombieChowder

改變位置

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
    .US{ 
     position: relative; 
     overflow:auto; 
     bottom: 250%; 
     left: 15%; 
     text-align: center; 
    } 
    .EU{ 
    position: relative; 
    overflow:auto; 
    bottom: 250%; 
    right: 15%; 
    text-align: center; 
    } 
    }

來源

2016-02-08 07:43:49

謝謝，但他們用position:absolute在主容器

內許多元素彼此並獲得相同的位置發生碰撞

讓一個父容器，並給予position:absolute並設置子容器仍然在碰撞。 – ZombieChowder

刪除底部屬性 –

即使我刪除媒體查詢的底部屬性，仍然無法正常工作... – ZombieChowder

您可以根據自己的需求

來源

2016-02-08 09:17:47

回答

相關問題