javascript - 图像上的文本在 Bootstrap 中没有响应

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 fiddle 也是如此。

Answer 1

所以我添加了这个媒体查询

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

并将 col-xs-12 添加到包含我的标题的 div 中。

这对我有用。感谢您的帮助。