Пользовательский CSS Bootstrap не применяется

Question

Мой пользовательский файл CSS не переопределяет bootstrap.min.css, если я не использую тег !important в классе

Это изменит цвет моего фонового заголовка

.bg-grey{
    background-color:#333 !important;
}

Хотя это не будет

.bg-grey{
    background-color:#333;
}

Есть идеи, почему это происходит, потому что я поместил внешний лист прямо в тот же каталог?

Answer 1

Обычно это происходит потому, что ваш bootstrap.min.css анализируется после вашего пользовательского файла.В каком порядке вы включаете файлы CSS в своей голове?Вы должны быть уверены, что ваш пользовательский файл включен после вашего файла начальной загрузки.

Answer 2

Использование !important считается приемлемым для служебных / вспомогательных классов, и авторы Bootstrap выбрали для использования !important на всех Bootstrap 4 Utilityклассы .

служебные классы цвета фона (bg-*) используют !important, поэтому вы должны использовать !important, чтобы любые пользовательские переопределения цветов имели приоритет.

Однако bg-grey не является цветом, включенным в Bootstrap 4. Если вы определяете пользовательский цвет, убедитесь, что переопределения соответствуют любому предыдущему определению CSS bg-grey.