我需要在caption
喜欢此图片的图片包装器(图片底部)中显示bootstrap carousel
。在.carousel-caption
class
我设置了position relative
和top : 300px
,但我的caption
无法处理图片wrapper
。如何解决他?
CSS代码:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel {
margin-bottom: 60px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption {
background-color: transparent;
position: relative;
max-width: 550px;
padding: 0 20px;
margin:0 auto;
top: 300px;
text-align:center;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
@media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
}
HTML:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://getbootstrap.com/assets/img/examples/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1280/1024/technics" alt="">
<div class="container">
<div class="carousel-caption text-centered">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1280/1024/abstract" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
Live Previe here
答案 0 :(得分:0)
您的容器div
需要包含图片和标题。
它只包含此示例中的标题。
答案 1 :(得分:0)
HTML:
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators hidden">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<img src="images/slide1.jpg" height="400"alt="" />
<div class="carousel-caption" style="color:red; width:100%;">
<div class="row">
<div class="col-md-6 col-sm-6">
</div>
<div class="col-md-6 col-sm-6">
<div>
<h2>Haby Scholarship</h2>
<h3>By Haby Digital</h3>
<h2>Commerce</h2>
<p>Description...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<img src="images/slide2.jpg" height="400"alt="" />
<div class="carousel-caption" style="color:#68217A;">
<div class="row">
<div class="col-md-7">
</div>
<div class="col-md-5">
<div style="width:100%;">
<h2>Phael Scholarship</h2>
<h3>By Phael Digital</h3>
<h2>Information Technology</h2>
<p>Description...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<img src="images/slide1.jpg" height="400"alt="" />
<div class="carousel-caption" style="color:#DF6026;">
<div class="row">
<div class="col-md-7">
</div>
<div class="col-md-5">
<div style="width:100%;">
<h2>Haby-Phael Scholarship</h2>
<h3>By Haby-Phael Digital</h3>
<h2>Science</h2>
<p>Description...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="carousel-control left slider-arrow-margin-left"><span style="color:#808080;"><i class="fa fa-chevron-circle-left fa-3x" aria-hidden="true"></i></span></a>
<a data-slide="next" href="#myCarousel" class="carousel-control right slider-arrow-margin-right"><span style="color:#808080;"><i class="fa fa-chevron-circle-right fa-3x" aria-hidden="true"></i></span></a>
</div>
</div>
</div>
</div>
</section>
CSS:
.carousel-control {
background:none;
}
.carousel-control.left{
background-image:none;
background-repeat: repeat-x;
filter:unset;
}
.carousel-control.right{
right: 0;
left: auto;
background-image: none;
background-repeat: repeat-x;
filter: unset;
}
@media (max-width: 767px) {
.image-wrapper-bg {
width: 80%;
margin: 0 auto;
border: 2px solid #9AA5A7;
}
}
@media (min-width: 992px) {
.carousel-control .icon-prev, .carousel-control .icon-next,
.carousel-control, .carousel-control {
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
.slider-arrow-margin-left{
margin-left:-100px;
}
.slider-arrow-margin-right{
margin-right:-100px;
}
.image-wrapper-bg{
width: 94%;
margin:0 auto;
border:2px solid #9AA5A7;
margin-right:0;
}
.caption {
height: auto;
width: 100%;
margin: 0;
}
}
@media (min-width:768px) and (max-width: 991px) {
.image-wrapper-bg{
width: 84%;
margin:0 auto;
border:2px solid #9AA5A7;
}
.slider-arrow-margin-left{
margin-left:-30px;
}
.slider-arrow-margin-right{
margin-right:-30px;
}
.padding-slider-caption{
padding:20px 20px 20px 40px;
}
.caption{
padding-left:50px;
}
}
.padding-slider-caption{
padding:20px;
}
@media (max-width: 767px) {
.image-wrapper-bg{
width: 70%;
margin:0 auto;
border:2px solid #9AA5A7;
}
.padding-slider-caption{
padding:20px 20px 20px 40px;
}
.caption{
padding-left:50px;
}
}
.padding-slider-caption{
padding:20px;
}
@media (min-width:992px) {
.carousel-caption{
position:realative;
/*background-color: hsla(360, 100%, 100%, 0.5);*/
color:#68A667;
margin-top:-10px;
text-align: left;
line-height: 1.5;
padding:15px;
z-index: 10;
bottom:200px;
}
}
@media (min-width:600px) and (max-width:991px) {
.carousel-caption{
position:realative;
/*background-color: hsla(360, 100%, 100%, 0.5);*/
color:#68A667;
margin-top:-10px;
text-align: left;
line-height: 1.5;
padding:15px;
z-index: 10;
bottom:0;
}
}
覆盖引导程序允许您将标题放在任何位置。 #bootstrap #CSS #Responsive