Question

我使用默认箭头（glyphicon-chevron-left和glyphicon-chevron-right）创建了一个Twitter Bootstrap轮播。它们在旋转木马中垂直居中。

我想用两个不同的图标替换这些图标，即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类。

Answer 1

我不得不承认，这个问题有点奇怪。在Twitter Bootstrap中，有以下特定内容：

.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

如您所见，没有指定.glyphicon-circle-arrow-left和.glyphicon-circle-arrow-right类。所以你可以简单地添加它，一切都应该正常工作：

.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

Answer 2

我正在使用Bootstrap 3.3.4，如果你添加了 icon-prev （左箭头）和 icon-next 你的（glyphicon）。

我将我的glyphicon从默认的.glyphicon-chevron-left更改为使用.glyphicon-menu-left和right。

＆＃13;
＆＃13;
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'> <span class='glyphicon glyphicon-menu-left icon-prev'></span> </a> <a class='right carousel-control' href='#carousel-custom' data-slide='next'> <span class='glyphicon glyphicon-menu-right icon-next'></span> </a>
＆＃13;
＆＃13;
＆＃13;

Answer 3

我同意Flixer，但也许最好不要编辑原始的Bootstrap css文件。相反，你可以把这些行：

/* Bootstrap: Center carousel arrow icons   */
.carousel-control .glyphicon-arrow-left, 
.carousel-control .glyphicon-arrow-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

在您自己的项目css文件中。这可以避免在升级到新的Bootstrap版本时出现问题。

Twitter Bootstrap轮播箭头不垂直居中，具体取决于glyphicon

3 个答案: