使用 Bootstrap 3 在轮播控件中垂直居中字形图标

Question

我在 Bootstrap 中创建了一个图像滑块。我设置了一个carousel-control 类来循环浏览图像。我还尝试在控制面板中添加左右字形图标。当我添加glyphicon-chevron 时，它会导致垂直和水平居中，但如果我将其更改为glyphicon-triangle，字形图标不会在carousel-control 面板的中心对齐。

带有glyphicon-chevron的轮播html：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" style="width: 800px; heigh:400px; margin: 0 auto">
    <div class="carousel-inner">
        <div class='item active'>
            <img src='http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png' alt='info1' />
            <div class='carousel-caption'>
                <h1>info1</h1>
                <p>text here</p>
            </div>
        </div>
        <div class='item'>
            <img src='http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png' alt='info2' />
            <div class='carousel-caption'>
                <h1>info2</h1>
                <p>text here</p>
            </div>
        </div>
    </div>
    <a href="#myCarousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-carousel-left"></span>
    </a>
    <a href="#myCarousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

结果：

带有glyphicon-triangle的轮播html：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" style="width: 800px; heigh:400px; margin: 0 auto">
    <div class="carousel-inner">
        <div class='item active'>
            <img src='http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png' alt='info1' />
            <div class='carousel-caption'>
                <h1>info1</h1>
                <p>text here</p>
            </div>
        </div>
        <div class='item'>
            <img src='http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png' alt='info2' />
            <div class='carousel-caption'>
                <h1>info2</h1>
                <p>text here</p>
            </div>
        </div>
    </div>
    <a href="#myCarousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-triangle-left"></span>
    </a>
    <a href="#myCarousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-triangle-right"></span>
    </a>
</div>

结果：

Answer 1

Bootstrap css 专门针对 .glyphicon-chevron-right 类（参见下面的代码）。

您需要在自己的样式表中添加相同的 css 以定位新的字形三角形。

@media screen and (min-width: 768px)
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  font-size: 30px;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
  right: 50%;
  margin-right: -10px;
}