twitter-bootstrap - Bootstrap Carousel 上的内容在背景中滑动

Question

我有一个带有图像的 slider ，它作为一个滑动组件，在它上面我想放置一个恒定的内容 block ，该内容 block 将显示在 block 的中心，与页面对齐，无论屏幕大小如何，如下所示.

<div id="homeSlider"> 
    <!-- Slider -->
    <div class="carousel" id="my-carousel">
      <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active" style="background-image:url(img/slider_img2.jpg);"></div>
        <div class="item" style="background-image:url(img/slider_img1.jpg);"></div>
        <div class="item" style="background-image:url(img/slider_img3.jpg);"></div>
      </div>
      <a href="#my-carousel" class="carousel-control left" data-slide="prev">&lsaquo;</a> <a href="#my-carousel" class="carousel-control right" data-slide="next">&rsaquo;</a> </div>

    <!-- /Slider -->

    <div class="mainPitch">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1>Reach  out  to  Apartment  Residents</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
            <div class="mainAction"><a class="btn btn-danger" href="">a</a><a class="btn btn-success" href="">a</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

#mainPitch 的 html:

 <div class="mainPitch" style="position:absolute; top:50px;">
      <div class="container">
        <div class="row">
          <div class="col-xs-6" style="text-align:center;">
            <h1>Reach  out  to  Apartment  Residents</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
            <div class="mainAction"><a class="btn btn-danger" href="">a</a><a class="btn btn-success" href="">a</a></div>
          </div>
        </div>
      </div>
</div>

将您的旋转木马包裹在 .col-xs-6 中或根据您的旋转木马的宽度更改类。

参见:http://bootply.com/101530