Индикаторы карусели не отображаются на белом фоне на слайдах (пользовательский стиль или добавление класса)?

Как я могу переопределить показатели карусели? У меня есть белые слайды со средним содержанием, а белые индикаторы не отображаются. Как я могу настроить темный цвет, чтобы они отображались?

Ответ 1

.carousel-indicators li класс .carousel-indicators li в другом файле после CSS-пакета Bootstrap. Ниже я показываю некоторые фрагменты для каждой версии Bootstrap до текущей версии (v4).

Bootstrap 2.3.2

.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel-indicators .active {
  background-color: #444;
}

CodePen для Bootstrap v2.3.2

Bootstrap 3.4.1 и 4.3.1

То же правило применяется к обеим версиям.

/* Add an extra .carousel parent class to increase specifity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li {
  background-color: #fff;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel .carousel-indicators .active {
  background-color: #444;
}

CodePen для Bootstrap v3.4.1
CodePen для Bootstrap v4.3.1

Ответ 2

Не забудьте указать! важно после стилей:

.carousel-indicators li {
  background-color: #999 !important;
  background-color: rgba(70,70,70,.25) !important;
}

.carousel-indicators .active {
  background-color: #444 !important;
}

Ответ 3

Я согласен с @thiagobraga. Переопределить класс начальной загрузки .carousel-indicators li класса .carousel-indicators li.

Если вы хотите остаться с внешним видом начальной загрузки, они используют границу (с радиусом), чтобы сделать свои пустые круги. Таким образом, вы можете просто переопределить цвет границы:

    .carousel-indicators li {
        border-color: #777;
    }

    .carousel-indicators .active {
        background-color: #777;
    }