Question

我使用Bootstrap V4，我试图在Carousel Navigation 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设置不同的显示属性，宽度，浮点数等没有成功：（

有关如何实现这一目标的任何建议？

非常感谢， Ralms

Answer 1

我明白了！

我使用bootstrap类将以下css属性设置为锚标记：

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

接下来我不得不在“控制下一个”上切换元素的顺序，因为我的方式，标签显示在顶部。

希望你觉得它有用。

Bootstrap V4 Carousel导航箭头标签

1 个答案: