Как изменить размер паддингов в сетке bootstrap4?

Question

[Сергей Бурдужа]

У меня в макете размер падинга для колонки имеет размер в 5px. То есть, по-умолчанию в bootstrap переменная $grid-gutter-width имеет 30px. Я в макете поменял значение этой переменной на 10px. Но все равно при верстке колонки имеют падинги в 15px.
Что я пропустил?
Заранее благодарен.

Answer 1

[NaN]

сначала подключаете в общий файл стили с переопределением переменных, потом сам бутстрап, потом все остальные стили

Comments

[Сергей Бурдужа]

Вот как я подключил

@import "../../../../node_modules/bootstrap/scss/bootstrap-reboot";
@import "../../../../node_modules/bootstrap/scss/bootstrap-grid.scss";
@import "variables";
@import "icomoon";

В файле variables.scss я и переопределил стили bootstrap.

[NaN]

Сергей Бурдужа, ну а стили бутстрапа то после них подключаются? Здесь я вижу reboot (в который как раз и импортируются переменные бустрапа) и сетку. По идее должны быть что-то вроде этого:

@import "abstracts/module";               /* Конфигурация и помощники (переопределение переменных например)*/
@import "vendors/module";                 /* Сторонние стили библиотек: бутстрап */
@import "base/module";                    /* Базовые стили */
@import "layout/module";                  /* Разделы, относящиеся к компановке */
@import "components/module";              /* Компоненты */

В каждый модулю подключаются другие scss
abstracts/module:

@import "colours";
@import "my-variables";
@import "bootstrap-v3-variables";
@import "my-mixins";

vendors/module:

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

То есть в вашем случае нужно сначала подключить:

@import "variables";
@import "../../../../node_modules/bootstrap/scss/bootstrap-reboot";
@import "../../../../node_modules/bootstrap/scss/bootstrap-grid.scss";
@import "icomoon";

[Сергей Бурдужа]

NaN, Так в bootstrap-grid.css и подключаются переменные joxi.ru/BA0dRk7HByD7VA

[NaN]

Сергей Бурдужа, попробуйте поменять как ваше я написала, должно заработать

[Сергей Бурдужа]

NaN, Я сделал по-другому, хотя это может быть неправильно.
Я прописал следующее в style.scss

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px;
}

и еще

.container {
  max-width: 972px;
  margin: 0 auto;
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
}

[NaN]

Сергей Бурдужа, если это прямо в стилях бутстрапа - это очень плохо, особоенно через npm пакет. Вот обновится он и все слетит или другая ошибка какая

[Сергей Бурдужа]

NaN, так не правильно. Сначала должны идти стили bootstrap, а потом мои. Как я смогу переопределить переменные bootstrap, если мои файл с переменными стоит выше?

[NaN]

Сергей Бурдужа, Потому что именно так переопределяются переменные. Иначе они и не будут работать.

[Сергей Бурдужа]

NaN, Я извиняюсь, наверное вы меня не правильно поняли. Я подключил сперва bootstrap-reboot и bootstrap-grid.scss. Во втором файле находятся переменные, миксины bootstrap и другие настройки. А файл, который подключил последним, variables.scss - это мой файл, где я пишу свои переменные для цветов для проекта, он ничего общего с bootstrap не имеет.
Так вот, меня интересует, почему, если я прописал в vairable.scss $grid-gutter-width: 10px, то не меняется размер падингов для проекта?

[Сергей Бурдужа]

NaN, Черт возьми, вы были правы. Свои настройки следует подключить перед bootstrap. Какой же я упертый. Хотя, такой подход логике не подается. Ведь в css мы используем другой подход.
Спасибо, что ответили.

[NaN]

Сергей Бурдужа, не за что) сама когда-то не знала