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/

＆＃13;

<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>

＆＃13;

这是跳过绝对位置的另一种方法。

Answer 2

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

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

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

它对我有用。谢谢你的帮助。

图像上的文字在引导程序中没有响应

2 个答案: