css - 如何将 Bootstrap 轮播指示器更改为点？

Question

我正在使用 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>

轮播指示器显示为线条:

有什么方法可以将指示器改为点而不是线？我会假设这是一个 Bootstrap 选项，但我没有找到相关文件。我需要为此编写自定义 css 吗？

Answer 1

是的，我认为您需要编写自定义 CSS 来将线变成点。
您只需要重写两个属性(width 和 height)并添加一个新属性，border-radius，到 .carousel-指标 li.
使 width 和 height 值相等，例如:10px 并给 border-radius 100% 。

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