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

Question

我有一个简单的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%） - 有没有人知道这样做的方法？

Answer 1

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

因此，通过设置bottom percentage. 这是一个示例，我将它们放置在距轮播中心约 75% 的位置。

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

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

Answer 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 */
}