有没有办法将图片容器外的标题放在一边?我尝试在position: relative
上添加.carousel-caption
但这仅在我想将其放在图片下方时才有效。我也尝试将overflow: visible
添加到.carousel-inner
,虽然这确实有效,但每当幻灯片更改时,其他图片也会显示在背景中。
现在我正在做position: absolute
来定位它,但正如你所看到的那样,标题被图像容器切断了。
这是我正在使用的基本结构:
<div id="featured-news" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="images/banner-img.jpg" alt="Banner">
<div class="carousel-caption">
<h3>Lorem Ipsum dolor Sit Amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
<img src="images/divider.png" alt="Divider">
<p class="posted">Posted by MrDoom on April 15, 2011</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/banner-img.jpg" alt="Banner">
<div class="carousel-caption">
<h3>Lorem Ipsum dolor Sit Amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
<img src="images/divider.png" alt="Divider">
<p class="posted">Posted by MrDoom on April 15, 2011</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/banner-img.jpg" alt="Banner">
<div class="carousel-caption">
<h3>Lorem Ipsum dolor Sit Amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
<img src="images/divider.png" alt="Divider">
<p class="posted">Posted by MrDoom on April 15, 2011</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#featured-news" role="button" data-slide="prev">
<img src="images/arrows-left.png" alt="Left arrows">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#featured-news" role="button" data-slide="next">
<img src="images/arrows-right.png" alt="Right arrows">
<span class="sr-only">Next</span>
</a>
</div>
答案 0 :(得分:0)
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
只需在代码中添加此CSS即可克服此问题。