Поддержка начальной загрузки для пары точек останова
У меня есть требование предоставить только 2 точки останова для одного из приложений. Эти 2 точки останова: <=768 для мобильных устройств и 1280 >= для настольных компьютеров. (Без точки останова планшета)
Как я могу изменить $grid-breakpoints для поддержки этой структуры?
Я считаю, что это как:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1280px
);
где я буду обслуживать только md, xl и игнорировать sm, md и lg?
Пожалуйста, предоставьте предложения?
почему вам нужно переопределить точку останова начальной загрузки ?? вместо этого используйте медиа-запросы.
Я также буду использовать классы и компоненты Grid.
Функция настройки еще недоступна в Bootstrap 4. В вашей библиотеке начальной загрузки есть обновление вручную.
Это не идеально, но для указанных выше переменных SASS сделайте XS, SM, MD одинаковыми значениями и одинаковыми для LG и XL. Это должно фактически сделать то же самое, даже если это немного фу.
@Льюис: Да. Я думал о том же. но даже с переменной grid, которую я вставил, если я предоставлю классы столбцов только для «md» и «xl», будет ли этого достаточно?
@ Робин Вероятно, нет. Некоторые классы, такие как .container, реагируют на точки останова без какого-либо дополнительного вмешательства пользователя.
Ответы 1
Похоже, ваш вопрос действительно касается точек останова 3. В описании <=768 is mobile & 1280 >= desktop отсутствует диапазон между 768 и 1280.
Предполагая, что вы имели в виду эти 3 точки останова:
<=768(подразумевается или 'xs')>768 & <1280(мкр)>=1280(XL)
Настройки SASS просты:
@import "bootstrap/functions";
@import "bootstrap/variables";
$grid-breakpoints: (
xs: 0,
md: 768px,
xl: 1280px
);
@import "bootstrap";
https://codeply.com/go/GZJHsDyeH2
Что происходит с классами, которые полагаются на отсутствующие точки останова, такие как .container? Будут ли они просто адаптироваться?
Вы можете использовать $container-max-widths (как показано в Codeply), чтобы контролировать, какие медиа-запросы создаются для ширины контейнера.
@Zim: Спасибо за ваше предложение. Итак, ширина контейнера - это единственное предостережение, или мне нужно обрабатывать что-то кроме этого?
@Zim: у тебя была возможность увидеть мой предыдущий запрос?
Несмотря на это, применяется промежуточная точка останова начальной загрузки sm.
@Zim: 576 пикселей бутстрапа содержат ширину контейнера 540. Это применяется, хотя max-width не указано. Я хочу ширину контейнера = 100% до 767 пикселей.
Хорошо, я перезаписал его, поставив 100% `$container-max-widths: (sm: 100%, md: 750px, xl: 1200px);`
@Robin - я пытаюсь добиться аналогичного результата. Были ли у вас проблемы с использованием процента для небольшой точки останова $container-max-width? Я думал, что значения должны быть в пикселях? (Я пытаюсь заставить максимальную ширину контейнера быть 100% для мобильных устройств и планшетов).
Вы хотите перезаписать загрузочный css этими точками останова?