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

Posted 2023-03-06

【中文标题】Bootstrap 4 - 更改轮播控件的位置

【英文标题】：Bootstrap 4 - change position of carousel controls

【发布时间】：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%）- 有人知道这样做的方法吗？

【参考方案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 */