Bootstrap 4 - 更改轮播控件的位置答案

【问题标题】：Bootstrap 4 - change position of carousel controlsBootstrap 4 - 更改轮播控件的位置
【发布时间】：2018-05-04 04:41:05
【问题描述】：

我有一个简单的bootstrap 4 (beta-v2) 轮播：

<div id="carouselSteam" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
        {% for key, value in results.items %}
            {% if forloop.counter == 1 %}
                <div class="carousel-item active">
                    {% include "games/result_table.html" with key=key value=value %}
                </div>
            {% else %}
                <div class="carousel-item">
                    {% include "games/result_table.html" with key=key value=value %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselSteam" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselSteam" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

我的问题是carousel-inner 可以很长，因为它包含一个表格。目前，控件出现在轮播的中间；理想情况下，我希望它们更接近顶部（比如距离顶部 20%）- 有人知道这样做的方法吗？

【问题讨论】：

标签： css carousel bootstrap-4

【解决方案1】：

在最新的 Bootstrap v4 Beta 中，轮播控件与轮播底部的距离由bottom CSS 属性控制。

因此，通过设置bottom percentage 来控制左右轮播控件图标的放置是相当容易的。这是一个示例，我将它们放置在距轮播中心大约 75% 的位置。

.carousel-control-prev,
.carousel-control-next{
      bottom: 75%;
}

这是一个有效的代码笔：https://codepen.io/Washable/pen/xPYJma?editors=1100

【讨论】：

【解决方案2】：

在 v4.0.0 的 Bootstrap 4 中

.carousel-control-prev,
.carousel-control-next{
    align-items: flex-start;; /* Aligns it at the top */
}

.carousel-control-prev,
.carousel-control-next{
    align-items: flex-end;; /* Aligns it at the bottom */
}

【讨论】：

【解决方案3】：

在 Bootstrap 4 中，您还可以使用：

.carousel-control-prev,
.carousel-control-next{
  align-self: flex-end; /* Aligns it at the bottom */
}

或

.carousel-control-prev,
.carousel-control-next{
  align-self: flex-start; /* Aligns it at the top */
}

【讨论】：