使用Bootstrap 3在轉盤控制中垂直居中的glyphicons

Question

我已經在Bootstrap中創建了一個圖像滑塊。 我設置了一個carousel-control類來循環瀏覽圖像。 我還嘗試將右和左字形圖標添加到控制面板。 當我添加glyphicon-chevron其結果在垂直和水平方向上居中，但是如果將其更改為glyphicon-triangle則glyphicon不會在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，以定位新的glyphicon三角形。

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