引导轮播控件位置不正确答案

【问题标题】：Bootstrap carousel controls located incorrectly引导轮播控件位置不正确
【发布时间】：2017-05-23 04:19:11
【问题描述】：

使用带有 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%;
}

我包含这个只是为了完整性，因为注释掉除了第一次导入之外的所有内容不会更改图标的位置。同样，控制台中没有加载错误或任何内容。感谢您的帮助！

【问题讨论】：

标签： css twitter-bootstrap font-awesome

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

【讨论】：

【解决方案2】：

在你的 HTML 中添加 control-left、control-right 到你的 span 类

<a href="#welcome-carousel" class="left carousel-control" data-slide="prev">
                    <span class="control-left 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="control-right 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 -->

在你的 CSS 布局文件中

.carousel-control .control-left,
.carousel-control .control-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .control-left {
  left: 50%;
}
.carousel-control .control-right {
  right: 50%;
}

【讨论】：

【解决方案3】：

向 .controls 类添加填充指令作为一种解决方法可以正常工作，但我很想知道是否有更优雅/可接受的方式来解决这个问题。比如，我一开始是不是做错了什么？

【讨论】：

【解决方案4】：

这适用于带有 Font Awesome 的 Carousel 控制器

<!-- Controls -->
                        <a class="left carousel-control" href="#carousel_id" role="button" data-slide="prev">
                            <span class="icon-prev fa-stack fa-lg"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel_id" role="button" data-slide="next">
                            <span class="icon-next fa-stack fa-lg"></span>
                        </a>

【讨论】：