Обновление не всех точек останова сетки Bootstrap - PullRequest
0 голосов
/ 18 мая 2018

У меня есть 2 вопроса: 1. Для чего используется переменная Bootstrap $ container-max-width ?2. Как мне переопределить переменные, если мне нужны следующие разрешения?

 sm: 0px -> 768px - tablet portrait
 md: 769px -> 1442px - tablet landscape and laptop
 lg: 1443px -> 1920px - large screens

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Вам просто нужно переопределить $grid-breakpoints и $container-max-widths.Напишите эти коды до того, как вы импортируете начальную загрузку.

Точки останова сетки

// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
        sm: 0,
        md: 769px,
        lg: 1443px,
) !default;

Сетка контейнеров

// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 768px,
        md: 1442px,
        lg: 1920px,
) !default;
0 голосов
/ 18 мая 2018

Просто импортируйте ваши переменные перед импортом начальной загрузки, потому что эти переменные определены с флагом! Default, поэтому, когда ваш scss будет преобразован в css, он будет использовать ваши значения переопределения.

$grid-breakpoints: (
  xs: 0,
  sm: 0,
  md: 769px,
  lg: 1443px,
  xl: 1921px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@import 'bootstrap'
...