Twitter Bootstrap轮播箭头不垂直居中取决于字形答案

【问题标题】：Twitter Bootstrap carousel arrows not centered vertically depending on glyphiconTwitter Bootstrap轮播箭头不垂直居中取决于字形
【发布时间】：2015-04-22 12:12:46
【问题描述】：

我创建了一个带有默认箭头（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 类。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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;
}

【讨论】：

或者只是.carousel-control span { ... }

【解决方案2】：

我使用的是 Bootstrap 3.3.4，如果你添加类 icon-prev（左箭头）和 icon-next，你可以使用你喜欢的任何 glyphicon到你的（字形图标）。

我将 glyphicon 从默认的 .glyphicon-chevron-left 更改为使用 .glyphicon-menu-left 和 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>

【讨论】：

这不起作用。事实上，使用 icon-prev 和 icon-next 将覆盖您选择的字形。

【解决方案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 版本时出现问题。

【讨论】：