Bootstrap轮播控件位置不正确

Question

使用带有fontawesome的Bootstrap 3作为控件上的图标:除了图标位于轮播顶部而不是居中之外,一切看起来都不错.

<div class="row" id="landing">
            <div class="col-md-12">
                <div class="carousel slide" id="welcome-carousel" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#welcome-carousel" data-slide-to="0"></li>
                        <li data-target="#welcome-carousel" data-slide-to="1"></li>
                        <li data-target="#welcome-carousel" data-slide-to="2"></li>
                    </ol>

                    <!-- Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="assets/images/WelcomeImage0.png" alt="" >
                            <div class="carousel-caption">
                                <h3>Blooh Blah Bleeh</h3>
                                <p>Important bizness talk</p>
                            </div><!-- end caption -->
                        </div><!-- end item -->
                    </div><!-- end carousel-inner slides -->

                    <!-- Controls -->
                    <a href="#welcome-carousel" class="left carousel-control" data-slide="prev">
                        <span class="fa-stack fa-lg">
                            <i class="fa fa-square-o fa-stack-2x"></i>
                            <i class="fa fa-angle-left fa-stack-1x"></i>
                        </span>
                    </a><!-- end left control -->
                    <a href="#welcome-carousel" class="right carousel-control" data-slide="next">
                        <span class="fa-stack fa-lg">
                            <i class="fa fa-square-o fa-stack-2x"></i>
                            <i class="fa fa-angle-right fa-stack-1x"></i>
                        </span>
                    </a> <!-- end right control -->
                </div><!-- end carousel -->
            </div><!-- end col-md-12 -->
        </div><!-- end landing row -->

我使用凹槽生成带有此.less文件的CSS:

@import "../bootstrap/less/bootstrap.less";

@brand-primary: #ee594e;
@grid-gutter-width: 0;

body { padding-top: 70px; }

//make the carousel full-width
.carousel-inner,.carousel,.item,.container,.fill {
  height:100%;
  width:100%;
}

我只是为了完整性而包含此内容,因为除了第一次导入之外的所有内容都不会更改图标的位置.与此类似,控制台中没有加载错误或任何内容.我很感激帮助!

Answer 1

使用.icon-prev和.icon-next类,图标将垂直居中.

<!-- Controls -->
<a href="#welcome-carousel" class="left carousel-control" data-slide="prev">
    <span class="icon-prev fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x"></i>
        <i class="fa fa-angle-left fa-stack-1x"></i>
    </span>
</a><!-- end left control -->
<a href="#welcome-carousel" class="right carousel-control" data-slide="next">
    <span class="icon-next fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x"></i>
        <i class="fa fa-angle-right fa-stack-1x"></i>
    </span>
</a>