floydman-89
@floydman-89
В постоянном изучении...

Как переопределять системные стили Bootstrap?

Нужна помощь. Возьмем частный случай. Bootstrap v4.0.0-beta.

Подключил я значит navbar:

<div class="container">
   <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">...</a>
   </nav>
</div>


В стилях по-умолчанию у класса .navbar идут отступы padding: .5rem 1rem; которые находятся в _navbar.scss:18 .

Собственно вопрос: как мне добавить / изменить / удалить эти отступы, не используя в созданном мною style.css правило !important? Можно как для чайника объяснить, так как в Saas и подобных вещах абсолютно не силен )

P.S. Не скачивать же исходники CSS и в них делать правки, как-то это не комильфо же совсем...
  • Вопрос задан
  • 9413 просмотров
Решения вопроса 1
gobananas
@gobananas
finishhim.ru
Файлы бутстрапа не трогать.
Переопределить одиним из 2 методов:
1) Подключить свой css ниже бутстрапа, в нём написать например
.navbar{
  padding: 2rem 0.5rem;
}

Это переопределит отступы во всём бутстрапе

2) Добавить свой класс в конце:
<nav class="navbar navbar-expand-lg navbar-light myclass">

Дальше делаете то же самое, в свой css ниже бутстрапа добавляете:
.myclass{
  padding: 2rem 0.5rem;
}

Это переопределит родные бутстраповские стили стили только в одном месте.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
lukoie
@lukoie
ну, как бы, никто ж не запрещал добавить элементу класс px-0, вообще-то
так он даст нулевой паддинг по иксу вполне себе стандарным способом.
но если менять глобально, то у меня например есть файлик bs4custom.css, где переопределяются дефолтные стили, которые есть в БС4, и файл custom.css для остальных своих стилей
Ответ написан
Комментировать
dima9595
@dima9595
Junior PHP
Можете на самой странице, где появляется эта навигация, написать своё CSS правило. Думаю переопределяться свойства.
Ответ написан
Комментировать
@m1roku
Начинающий
Ай, не будет колдунства, у тебя не православный бутстрап, а шайтановский 4й. Не получится его собрать из того что было на сайте.
Лезь в sass файл и подставляй свое значение, sass отличается только тем что там нет скобочек и точек с запятой.
Получается что как раз таки скачивать исходники только не css, а что там у них scss? %)
Ответ написан
KorniloFF
@KorniloFF
Работаю по font-end / JS
Чтобы не использовать !important переопределяющее правило должно быть объявлено после переопределяемого правила, либо должно иметь более высокий приоритет. Про приоритеты записей гугли, простой пример:
#caption {...}
.caption {...}

Дся элемента
<div id=caption class=caption>...</div>
первое правило переопределит второе, поскольку у него более высокий приоритет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы