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%）——有谁知道这样做的方法吗？

原文由 Darkstarone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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

原文由 TidyDev 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Harekrishna Murari 发布，翻译遵循 CC BY-SA 4.0 许可协议