css - 在 Bootstrap 4 中自定义轮播指示器

Question

在 Bootstrap 4 中，我有一个带有两张幻灯片的轮播。我想自定义轮播指示器。

作为我想使用点的形状，活动点的颜色应该是红色，非活动点的颜色应该是黑色。这两个点应该被一个白色药丸状的形状包围，以从灰色背景中脱颖而出。

它应该如下所示：

我设法根据答案https://stackoverflow.com/a/47235368/3384674以及颜色更改了指标的形状：

.carousel-indicators li {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: black;
        opacity: 1;
      }

.carousel-indicators li.active {
        background-color: red;
      }

但是我不知道如何在指示器周围获得白色药丸状形状，以便它们始终很好地贴合在点周围。

标签： csstwitter-bootstrapbootstrap-4

Answer 1

.carousel-indicators{
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 25px;
    padding: 8px;
    align-items: center;
}
.carousel-indicators li{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: black;
    opacity: 1;
    border: 0;
}
.carousel-indicators li.active {
    background-color: red;
}