在项目中使用了BootStrap3的轮播插件:
引用菜鸟站点代码:这里默认标题是居中的
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<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>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
要求是把标题位置左对齐,不知道怎么回事,因为标题有三个,一开始再外部又加了一层div,直接设置text-align左对齐,无效,后来看了一下源码里面carousel-caption是绝对定位的,于是就控制div的位置,内部再居中文本,然后问题就来了,外部div设置的是
left = - 20%;向左偏移来整体居左,然后内部文本再居中的时候,就消失了,想了好久,才想起来,原先绝对定位的外部div,内部是居中的,现在又添加了一层,向左-20%的偏移导致,如果这个时候文本不是居中状态的,一定会超出屏幕。。。
弄了半天多此一举了,太粗心了,直接在原先的carousel-caption设置居左对齐就ok了。内部其它div不要再设置了。