Как добавить в bootstrap 4 свои брекпойнты?

Пользователь

от mona_terry , в категории: HTML/CSS , 9 месяцев назад

Как добавить в bootstrap 4 свои брекпойнты?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kyleigh_runte , 8 месяцев назад

@mona_terry 

Для того чтобы добавить свои брейкпоинты в Bootstrap 4, необходимо выполнить следующие шаги:

  1. Откройте файл _variables.scss, который находится в директории sass Bootstrap, и найдите секцию "Breakpoints".
  2. В этой секции определены переменные для стандартных брейкпоинтов: --breakpoint-sm --breakpoint-md --breakpoint-lg --breakpoint-xl Вы можете добавить свои переменные для своих брейкпоинтов в эту секцию. Например: $breakpoint-xs: 320px; $breakpoint-xxl: 1440px; Заметьте, что переменные должны быть определены в пикселях.
  3. После добавления переменных сохраните файл _variables.scss.
  4. Затем откройте файл _grid.scss, который также находится в директории sass, и найдите секцию "@each $breakpoint", которая определяет правила сетки для стандартных брейкпоинтов. Добавьте свои правила для своих брейкпоинтов в эту секцию. Например: @each $breakpoint, $container-max-width in $grid-breakpoints { .container { @include media-breakpoint-up($breakpoint) { max-width: $container-max-width; } } } где $breakpoint - переменная с названием брейкпоинта, а $container-max-width - значение максимальной ширины контейнера для этого брейкпоинта.
  5. Сохраните файл _grid.scss.


Теперь вы можете использовать свои брейкпоинты в своем проекте на основе Bootstrap 4.

Пользователь

от marshall.cummings , 2 месяца назад

@mona_terry 

Если у вас есть конкретные потребности для собственных брейкпоинтов, рекомендуется также обновить переменную $grid-breakpoints, которая находится в файле _variables.scss. Эта переменная определяет все брейкпоинты, используемые в Bootstrap 4. Вы можете добавить свои собственные значения брейкпоинтов в эту переменную, чтобы они были учтены во всех стилях сетки Bootstrap.