我创建了一个Twitter Bootstrap走马灯,带有默认箭头(glyphicon-chevron-left和glyphicon-chevron-right)。这些箭头在走马灯中垂直居中,看起来很漂亮。
我考虑用两个不同的图标替换这些图标,即glyphicon-circle-arrow-left和glyphicon-circle-arrow-right。但是,仅替换图标时,它们突然不再垂直居中。我找不出原因。
这是垂直居中的版本(http://jsfiddle.net/AdF6b):
第二个版本为什么箭头不居中?唯一的区别是glyphicon类。
我考虑用两个不同的图标替换这些图标,即glyphicon-circle-arrow-left和glyphicon-circle-arrow-right。但是,仅替换图标时,它们突然不再垂直居中。我找不出原因。
这是垂直居中的版本(http://jsfiddle.net/AdF6b):
<div class="row">
<div id="foto-carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#foto-carousel" data-slide-to="0" class="active"></li>
<li data-target="#foto-carousel" data-slide-to="1"></li>
<li data-target="#foto-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://lorempixel.com/g/1600/800/city/1">
<div class="carousel-caption">
<h4>Slide 1</h4>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/g/1600/800/city/3">
<div class="carousel-caption">
<h4>Slide 2</h4>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/g/1600/800/city/5">
<div class="carousel-caption">
<h4>Slide 3</h4>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#foto-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> -->
</a>
<a class="right carousel-control" href="#foto-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
非居中版本(http://jsfiddle.net/AdF6b/1/):
<div class="row">
<div id="foto-carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#foto-carousel" data-slide-to="0" class="active"></li>
<li data-target="#foto-carousel" data-slide-to="1"></li>
<li data-target="#foto-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://lorempixel.com/g/1600/800/city/1">
<div class="carousel-caption">
<h4>Slide 1</h4>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/g/1600/800/city/3">
<div class="carousel-caption">
<h4>Slide 2</h4>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/g/1600/800/city/5">
<div class="carousel-caption">
<h4>Slide 3</h4>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#foto-carousel" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</a>
<a class="right carousel-control" href="#foto-carousel" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
第二个版本为什么箭头不居中?唯一的区别是glyphicon类。
.carousel-control span { ... }
- cawecoy