Twitter Bootstrap 轮播箭头在使用 glyphicon 后无法垂直居中

Question

我创建了一个Twitter Bootstrap走马灯，带有默认箭头（glyphicon-chevron-left和glyphicon-chevron-right）。这些箭头在走马灯中垂直居中，看起来很漂亮。

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

- Tohnmeister

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;
}

- Flixer

---

或者只需使用.carousel-control span { ... } - cawecoy

Answer 2

我正在使用Bootstrap 3.3.4，如果您将类“icon-prev”（向左箭头）和“icon-next”（向右箭头）添加到您的字体图标中，那么您可以使用任何您喜欢的字体图标。

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

<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>

- Baxny

---

这不起作用。实际上，使用icon-prev和icon-next将覆盖您选择的glyphicon。 - RolandiXor

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版本时出现问题。

- HoTseChu