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中，轮播控件与轮播底部之间的距离由bottom CSS属性控制。

因此，通过设置bottom percentage可以非常轻松地控制左右旋转木马控制图标的放置。这是一个例子，我将它们放置在旋转木马中心的75％左右。

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

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

Answer 2

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

Answer 3

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

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

3 个答案:

在v4.0.0的Bootstrap 4中