html - Bootstrap V4 旋转木马导航箭头标签

Question

我正在使用 Bootstrap V4 并且我正在尝试向 Carousel Navigation Arrows 添加标签。我决定取消隐藏屏幕阅读器的标签，但我想将它们放在居中的箭头下方。

Carousel Print

目前 Arrows 的 HTML 是这样的:

<a class="carousel-control-prev" href="#outlookProfile" role="button" data-slide="prev" onclick="(function(event) {event.preventDefault();})(event)">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span >Previous</span>
    </a>
    <a class="carousel-control-next" href="#outlookProfile" role="button" data-slide="next" onclick="(function(event) {event.preventDefault();})(event)">
        <span >Next</span>
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>

我试过使用 CSS 设置不同的显示属性、宽度、 float 等但没有成功:(

关于如何实现这一点有什么建议吗？

非常感谢，公羊

Answer 1

我想通了!

我已经使用 Bootstrap 类将以下 css 属性设置为 anchor 标记:

.carousel-control-prev, .carousel-control-next{
   display: flex;
   flex-direction: column;
}

接下来我必须在“control-next”上切换元素的顺序，因为按照我的方式，标签显示在顶部。

希望对您有所帮助。