Можно ли установить собственные точки останова в Bootstrap 4, просто отредактировав файлы CSS? - PullRequest
Новая
       40

Можно ли установить собственные точки останова в Bootstrap 4, просто отредактировав файлы CSS?

0 голосов
/ 15 января 2019

Прежде чем меня полностью застрелят здесь, я не могу думать ни о каком другом способе формулировки или формулировки этого вопроса, кроме как о том, как я поступаю следующим образом ...

Я бы хотел установить 2 дополнительные точки останова в Bootstrap 4 для 1366px и 1920px, так как xl Bootstrap очень ограничен всего 1200px.

Моя страница ссылается на bootstrap.min.css и bootstrap.bundle.min.js.

Я добавил --breakpoint-xxl: 1366px; - breakpoint-xxxl: 1920px; сразу после --breakpoint-xl: 1200px; в файле boostrap.min.css, а затем я создал два столбца следующим образом: 

<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 1 Content
</div>
<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 2 Content
</div>

При предварительном просмотре в браузере 1366 и 1920 столбцы не устанавливаются на 50% / 50%.

Я неправильно понял, как это сделать? Спасибо. NJ

1 Ответ

0 голосов
/ 16 января 2019

Ваш вопрос очень похож на Как создать новые точки останова в начальной загрузке 4 с использованием CDN?

"Можно ли установить пользовательские точки останова в Bootstrap 4, просто отредактировавCSS-файлы? "

Да , но для поддержки новых точек останова потребуется добавить lot CSS.На каждую точку останова ссылаются более 280 раз в CSS Bootstrap.Следовательно, добавление 2 новых точек останова добавит более 500 новых классов в CSS.Помните, что точки останова используются не только для сетки col-*, точки останова также используются для многих других адаптивных функций, таких как flexbox, утилиты выравнивания и отображения .

«Я добавил --breakpoint-xxl: 1366px; - breakpoint-xxxl: 1920px; сразу после --breakpoint-xl: 1200px; в файле boostrap.min.css»

Это CSS-переменные .Переменные CSS можно использовать, если вы хотите сослаться на них в запросе @media, но они не собираются волшебным образом добавлять новые классы для новых точек останова.

"Я хотел бы установить 2 дополнительные точки останова в Bootstrap 4 для 1366px и 1920px"

Это будет сделано с использованием SASS как объяснено здесь .SASS компилируется в CSS.Вы бы просто добавили точки останова сетки.Сгенерированный CSS будет содержать все новых col-xxl-*, col-xxxl-* и т. Д. И все другие отзывчивые классы и медиазапросы, как описано выше. 

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1366px,
  xxxl: 1920px
);

Демо: https://www.codeply.com/go/vC6Ocuw1zo

...