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

Question

[Илья Савельев]

Нужна помощь. Возьмем частный случай. 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 и в них делать правки, как-то это не комильфо же совсем...

Answer 1

[Дмитрий Дарт]

Файлы бутстрапа не трогать.
Переопределить одиним из 2 методов:
1) Подключить свой css ниже бутстрапа, в нём написать например

.navbar{
  padding: 2rem 0.5rem;
}

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

2) Добавить свой класс в конце:

<nav class="navbar navbar-expand-lg navbar-light myclass">

Дальше делаете то же самое, в свой css ниже бутстрапа добавляете:

.myclass{
  padding: 2rem 0.5rem;
}

Это переопределит родные бутстраповские стили стили только в одном месте.

Comments

[Илья Савельев]

Чувак, благодаря тебе я понял, что дико тупил и файл со своими стилями разместил выше файлов бутстрэпа

[Дмитрий Дарт]

Илья Савельев: это значит бустрап потом опять переопределил на дефолт у вас все классы для которых имена, id совпадали...

[dom1n1k]

Метод хорош для простых ситуаций. Но в ситуациях посложнее, вероятно, всё-таки придется править и пересобирать SASS-исходники.

Пример из жизни: я хочу изменить цветовую гамму бутстрапа - ну вот эти все кнопочки и всё такое. Переопределить все цвета поверх - задолбаешься! Дело в том, что самих-то цветов там хоть и немного, но используются они в нескольких сотнях мест. И это не гипербола, реально несколько сотен. Разные элементы, да помножить на типы (primary, secondary, danger...), да помножить на кучу состояний (hover, active, disabled, readonly...) - это чокнуться можно.

Answer 2

[lukoie]

ну, как бы, никто ж не запрещал добавить элементу класс px-0, вообще-то
так он даст нулевой паддинг по иксу вполне себе стандарным способом.
но если менять глобально, то у меня например есть файлик bs4custom.css, где переопределяются дефолтные стили, которые есть в БС4, и файл custom.css для остальных своих стилей

Answer 3

[Дмитрий Кузнецов]

Можете на самой странице, где появляется эта навигация, написать своё CSS правило. Думаю переопределяться свойства.

Answer 4

[Андрей]

Ай, не будет колдунства, у тебя не православный бутстрап, а шайтановский 4й. Не получится его собрать из того что было на сайте.
Лезь в sass файл и подставляй свое значение, sass отличается только тем что там нет скобочек и точек с запятой.
Получается что как раз таки скачивать исходники только не css, а что там у них scss? %)

Comments

[Илья Савельев]

а я тебе уже написал вот такой ответ:

МАХ(г)ИЯ - МАХ(г)ИЕЙ, но 404 Not Found никто не отменял.

https://getbootstrap.com/docs/4.0/customize/#navbar

Но у меня было в качестве магии Forbidden :( от местного редактора )

-----

То есть мне нужно скачивать Source files и через него колдовать?

[Андрей]

Илья Савельев: а вот и не успел, я удалил и переписал :)
Да качай source

[Илья Савельев]

Андрей: их поди еще нужно через какую-нибудь хрень компилировать?

[Андрей]

Илья Савельев: абсолютли, они предлагают grunt и даже вроде туторы какие-то есть у них же. но подойдет любой другой сборщик, тот же gulp.

[Илья Савельев]

Андрей: да спасет нас ютуб, пожалуй.

[Александр Маргинал]

Gulp + postcss и там scss используется в котором есть все знаки препинания, плюс он мощнее и переопределив параметры в variable вы сможете избавиться от кучи своих кастомное стилей

Answer 5

[Павел Корнилов]

Чтобы не использовать !important переопределяющее правило должно быть объявлено после переопределяемого правила, либо должно иметь более высокий приоритет. Про приоритеты записей гугли, простой пример:
#caption {...}
.caption {...}

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

Comments

[Андрей]

а учитывая что bootstrap любит задавать стили через .navbar_курточка .navbar_толстовка .navbar_футболка + .navbar_штаны {color: blue} то устанешь эти портянки переопределять да и любоваться этой каскадностью потом такое себе удовольствие)

[Илья Савельев]

получается что для всех переопределяемых элементов проставлять идентификаторы...хххммм...

[Павел Корнилов]

Илья Савельев: не обязательно. Можно просто повысить приоритет записи другим способом. Уже почитал про приоритеты?