Bootstrap Carousel 上的内容，背景是图像滑动答案

【问题标题】：Content over the Bootstrap Carousel with Image Sliding in backgroundBootstrap Carousel 上的内容，背景是图像滑动
【发布时间】：2014-01-06 16:06:30
【问题描述】：

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

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

【问题讨论】：

尝试类似`
`
@BassJobsen 它位于屏幕左侧并且不在屏幕中心
除了 bootstrap.css 和 js 和 jquery 之外，我们还需要包含任何特定的库吗？

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案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

【讨论】：

我的轮播需要是容器外的全页宽度。这会是个问题吗？
是的。现在我想将内容放在中心..但是在 bg 中的幻灯片应该拉伸整个长度
默认情况下轮播中的图像是响应式的（另请参阅stackoverflow.com/questions/17932509/…）以拉伸主题整个长度，您将需要更大的图像，请参阅：bootply.com/101889
我的意思是图像轮播在 .container 之外。紧随其后的是内容在顶部的 div。因此，由于轮播不受限制且居中，因此 top:50% 也会将其移至 left:0 。我希望内容类似于 margin: 0 auto;
我不确定我是否理解你。试试$('.mainPitch').css('top',($('.carousel-inner').height()/2));吧。

【解决方案2】：

请参阅此处。 http://www.sitepoint.com/css-center-position-absolute-div/。我遇到了同样的问题，这篇文章底部的第一条评论为我解决了这个问题。试试..

left: 0px;
right:0px;
margin: 0 auto;

【讨论】：

【解决方案3】：

<div>
<div class="content-div">Content DIV</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://placehold.it/1160x600" alt="..." />
            <div class="carousel-caption">This is caption</div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1160x600" alt="..." />
            <div class="carousel-caption">This is caption</div>
        </div>
    </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

在 CSS 部分下方找到：

.content-div {
text-align: center;
background: #090;
color: #fff;
width: 50%;
height: 150px;
position:absolute;
top:150px;
z-index:9;}

.carousel-inner{
width:100%;
position:relative;}
@media (min-width: 992px) {
.content-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;}}

【讨论】：