移動視圖中的文字重疊

這適用於更大的屏幕並顯示我想要的方式，但在移動設備上，「右標題」與「左標題」重疊。左標題應該上去，但是右標題應該在它下面，而是在左標題的頂部。移動視圖中的文字重疊

我該怎麼辦？

<div class="IdeathonCover"> 
     <img class="img-responsive" width="100%" src="bg-image.jpg"> 
      <div class="IdeathonLeftTitle"> 
       <h1>Left Title</h1> 
      </div> 
      <div class="IdeathonRightTitle"> 
       <h1>Right Title</h1> 
      </div> 
    </div>

我也試過這種方法，使用引導3佈局，但它沒有奏效。在「COL-X-12」不被尊重：

<div class="IdeathonCover"> 
     <img class="img-responsive" width="100%" src="bgimage.jpg"> 
      <div class="row"> 
       <div class="col-md-6 col-xs-12"> 
        <div class="IdeathonLeftTitle"> 
         <h1>Left Title</h1> 
        </div> 
       </div> 
       <div class="col-md-6 col-xs-12"> 
        <div class="IdeathonRightTitle"> 
         <h1>Right Title</h1> 
        </div> 
       </div> 
      </div> 
    </div>

使用的CSS低於：

.IdeathonCover { 
     position: relative; 
    } 
    .IdeathonLeftTitle { 
     position:absolute; 
     bottom: 10%; 
     left: 0; 
     padding: 0px 50px 20px; 
     color: #fff; 
     font-weight: 300; 
    } 
    .IdeathonRightTitle { 
     position:absolute; 
     bottom: 10%; 
     right: 0; 
     padding: 0px 50px 20px; 
     color: #fff; 
     font-weight: 300; 
    }

任何人都知道爲什麼會這樣？

來源

2015-08-21 user3362364

使用媒體查詢處理你想即移動或任何設備 – WisdmLabs

我什麼屏幕分辨率沒有。我使用了bootstrap的col-xs-12。 – user3362364

，但沒有使用'media-query'，因爲您已經使用'position：absolute'使用'media-query'併爲移動設備創建'relative'。 – vivekkupadhyay

如果您使用的是Bootstrap，據我所知，在絕對定位元素中使用Bootstrap類沒有任何問題。你可以嘗試沿着線的東西：

CSS：

.IdeathonCover { 
    position: relative; 
} 
.IdeathonTitles { 
    position: absolute; 
    bottom: 10%; 
    width: 100%; 
}

，並將HTML：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="IdeathonCover"> 
      <img class="img-responsive" src="bgimage.jpg" alt=""> 
      <div class="IdeathonTitles"> 
       <div class="col-md-6"> 
        <h1 class="text-center">Left title</h1> 
       </div> 
       <div class="col-md-6"> 
        <h1 class="text-center">Right title</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2015-08-21 12:54:48

謝謝。按照我想要的方式進行改動:) – user3362364

嘗試在你的CSS文件 -

@media (min-width: 320px) and (max-width: 750px){ 
.IdeathonLeftTitle { right: 0; } 
.IdeathonRightTitle { left: 0; top: 67px; } 
}

的到底應該有助於增加這一點。

來源

2015-08-21 11:32:22

我不想爲媒體查詢編寫我自己的CSS，因爲我已經使用引導程序。使其效率低下。謝謝你。 – user3362364

移動視圖中的文字重疊

回答

相關問題