如何将 Bootstrap 轮播指示器更改为点？答案

【问题标题】：How can I change Bootstrap carousel indicators into dots?如何将 Bootstrap 轮播指示器更改为点？
【发布时间】：2022-05-09 16:33:30
【问题描述】：

我正在使用 Bootstrap 4 Beta 2 版本来做轮播。代码如下所示：

                <ol class="carousel-indicators">
                    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#mycarousel" data-slide-to="1" ></li>
                    <li data-target="#mycarousel" data-slide-to="2" ></li>
                </ol>

轮播指示器显示为线条：

有没有办法可以将指标更改为点而不是线？我认为这是一个引导选项，但我没有找到相关文档。我需要为此编写自定义CSS吗？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

是的，我认为您需要编写自定义 CSS 来将线条变成点。
您只需覆盖两个属性（width 和 height）并将一个新属性 border-radius 添加到 .carousel-indicators li。
使width 和height 值相等，例如：10px 并给出border-radius 的100%。

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

【讨论】：

除非我这样做，否则我只会得到圆角......不是圆点
为什么当""border-radius:"'不起作用时""border-radius:100%""起作用？

【解决方案2】：

我必须包含 .carousel 才能正常工作。

.carousel .carousel-indicators li {
   width: 10px;
  height: 10px;
  border-radius: 100%;
}

【讨论】：

【解决方案3】：

在引导程序 5 中，如果您更改了 cmets 中的内容，它会起作用。

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px; /* change width */
    height: 10px; /* change height */
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 100%; // /* add border-radius */
}

示例：image of dots

【讨论】：

OP 问题适用于 bootstrap 4
@Sfili_81：是的。但是当 OP 提出问题时，Bootstrap 5 不可用。提供基于后续版本的更新答案似乎对社区向前发展很有价值。
谢谢@JeremyCaney。实际上，我一直在寻找 BS5 的解决方案并想出了这篇文章，所以我想为什么不为像我这样的人分享解决方案。

【解决方案4】：

您只需要更改图标路径以防万一，使用检查元素可以获得类名。我使用 Mozilla 获取类名，然后使用两个 svg 图标将默认图标更改为自定义图标。

.carousel-control-prev-icon {

    background-image: url("images/carousel/back.svg");

}

.carousel-control-next-icon {

    background-image: url("images/carousel/next.svg");

}

【讨论】：

【解决方案5】：

您必须使用单词 !important 覆盖内联样式。这会覆盖元素具有的任何其他样式。

通过执行以下操作，我能够将指示器设置为带有蓝色的圆圈：

.carousel-indicators button {
    height: 10px !important;
    width: 10px !important;
    margin: 0 10px !important;
    border-radius: 100%;
    background-color: #1963ac !important;
}

现代的 Bootstrap 轮播现在将它们布置为按钮。

【讨论】：

【解决方案6】：

使用这个：

.carousel-indicators li {
        width: 1rem;
        height: 1rem;
        border: 1px solid;
        border-radius: 50%;
        background-color: #E0E0E0;
    }
    
    .carousel-indicators .active {
        background-color: #000000;
    }

【讨论】：