文本在图像引导

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到有我的标题股利。

它适用于我。感谢帮助。