Установка собственного цвета фона панели навигации с помощью bg-class в Bootstrap 4 - PullRequest
0 голосов
/ 04 декабря 2018

Согласно руководству по миграции Bootstrap 4 , «теперь для навигационных панелей требуется какое-то фоновое объявление. Выберите из наших фоновых утилит (.bg-*) или задайте свои собственные с указанными выше легкими / обратными классами длябезумная настройка. "

Я пытался добавить класс bg-navbar (составленный) и установить фон для этого класса, но цвета не применялись.Затем я изменил его на bg-custom и применил цвета.

Почему bg-custom работает, а bg-navbar - нет?bg-custom официальный класс?Если так, я не могу найти это в официальных документах.Я думал, что это просто должно было начаться с bg-, чтобы работать, и то, что последует (конечно, если вы не используете один из официальных классов), не имеет значения.

Это не работает:

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-navbar">

.bg-navbar {
    background: linear-gradient(to bottom, #8259cb 0, #673ab7 100%);
}

Но это так (я только изменил bg-navbar на bg-custom):

   <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-custom">

    .bg-custom {
        background: linear-gradient(to bottom, #8259cb 0, #673ab7 100%);
    }

Обновление: проблема заключалась в проблеме компиляции.У меня был bg-custom установленный ранее, но SCSS не был правильно скомпилирован после изменения его на bg-navbar.

1 Ответ

0 голосов
/ 04 декабря 2018

Обновление 1:

С вашим bg-navbar панель навигации по-прежнему работает нормально:

enter image description here

демо: http://jsfiddle.net/aq9Laaew/285463/


Оригинал

Желаю вам jsfiddle , чтобы показать нам, что вы сделали и в чем проблема.

Здесь я составил bg-navbar и установил его фон на красный, и он заработал:

.bg-navbar {
    background: red;
}

enter image description here

демо: http://jsfiddle.net/aq9Laaew/285429/

Нет класса bg-custom!

И нет никакой магии в префиксе bg-.Добавление bg-* сработало, потому что это предопределенные фоновые классы в bootstrap4:

https://getbootstrap.com/docs/4.1/utilities/colors/#background-color

enter image description here

Заключение

Видите, как важно показать нам, что вы сделали, и ваш код?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...