文本在圖像引導

Question

沒有響應我有一個形象，在這我把一些標題的圖像右側和左側像下面

<div class="container-fluid no-padding"> 
    <div class="row"> 
    <div class="col-md-12"> 
    <div class="col-sm-3 text-center image-overlapping"> 
     <h1>Hello Suarj</h1> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. 
     </div> 
     <img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;"> 
     <div class="col-sm-3 text-center image-overlapping right"> 
     <h1>Hello Suarj</h1> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. 
     </div> 
    </div> 
</div> 

這很適合我，但它對移動設備沒有響應。我如何去做。

Here's小提琴相同。

Answer 1

在這裏，你去與解決方案https://jsfiddle.net/65upzvk6/18/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid no-padding"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping"> 
 
      <h1>Hello Suarj</h1> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem. 
 
     </div> 
 
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-8"> 
 
      <img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;" /> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping"> 
 
      <h1>Hello Suarj</h1> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這是跳過絕對位置多了一個途徑。

Answer 2

所以我加入這個媒體查詢

@media (max-width: 480px){ 
    .image-overlapping {position: relative; top : 0 !important;} 
} 

並補充col-xs-12到有我的標題股利。

它適用於我。感謝幫助。