如何在 Bootstrap 5 中垂直对齐轮播指示器？答案

【问题标题】：How to vertically align carousel indicators in Bootstrap 5?如何在 Bootstrap 5 中垂直对齐轮播指示器？
【发布时间】：2021-12-30 17:09:07
【问题描述】：

我不知道如何在 Bootstrap 5 中垂直对齐轮播指示器。我在这里找到的所有解决方案都适用于 Bootstrap 4，这对我不起作用。这是我的轮播指标标记。

       <div class='carousel-indicators'>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='0'
                class='active'
                aria-current='true'
                aria-label='Slide 1'
            ></button>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='1'
                aria-label='Slide 2'
            ></button>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='2'
                aria-label='Slide 3'
            ></button>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='3'
                aria-label='Slide 4'
            ></button>
        </div>

请记住，我完全从 Bootstrap 的文档中复制了这段代码。我在指标中添加了一些自定义 CSS 以使它们成为圆形。所以，我的目标是

o
o
o
o

而不是o o o o。

【问题讨论】：

不涉及 CSS 吗？因为我在这里既看不到引导类也看不到样式。也许将其添加为可运行的 sn-p。
@Raxi 这些是引导 5 类。我没有包含整个轮播的代码。可以在这里看到：getbootstrap.com/docs/5.0/components/carousel/#with-indicators
是的，我明白了。您可能希望在您的carousel-indicators 上设置flex-flow: column nowrap; 和top: 0;，以使其紧贴左侧。
@Raxi 工作就像一个魅力。非常感谢！

标签： html css bootstrap-5 bootstrap-carousel

【解决方案1】：

指标排成一行，因为 display: flex 属于 carousel-indicators 类。

为了使它们垂直对齐，您需要将flex-direction 更改为column。

将以下规则添加到您的代码中：

.carousel-indicators {
  flex-direction: column;
}

【讨论】：