twitter-bootstrap Bootstrap Carousel 上的内容和背景中的图像滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20658820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Content over the Bootstrap Carousel with Image Sliding in background
提问by Harsha M V
I have a Slider with images which works as a sliding component and above that i want to place a constant block of content that will be displayed at the center of the block aligned center to the page irrespective of the screen size as shown below.
我有一个带有图像的 Slider，它作为一个滑动组件工作，在它上面我想放置一个恒定的内容块，无论屏幕大小如何，这些内容块都将显示在与页面对齐的块的中心，如下所示。
<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">‹</a> <a href="#my-carousel" class="carousel-control right" data-slide="next">›</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>
回答by Bass Jobsen
html for your #mainPitch:
html 为您#mainPitch：
<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>
Wrap your carousel in a .col-xs-6or change the class according your carousel's width.
将您的旋转木马包裹在 a 中.col-xs-6或根据您的旋转木马的宽度更改类别。
回答by Jamil
Refer to here. http://www.sitepoint.com/css-center-position-absolute-div/. I had the same problem and the 1st comment on the bottom of this article fixed it for me. Try..
请参阅此处。http://www.sitepoint.com/css-center-position-absolute-div/。我遇到了同样的问题，本文底部的第 1 条评论为我解决了这个问题。尝试..
left: 0px;
right:0px;
margin: 0 auto;
回答by Ipsita
<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>
Find below the CSS part:
在 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;}}
