Bootstrap 4 - Как скрыть контейнер на ноутбуке и меньше, но показать его на рабочем столе

Question

Я занимаюсь разработкой шапки сайта. Панель поиска выглядит как полный рабочий стол HD:

Но на экране ноутбука (ширина: 1280 пикселей) это выглядит так:

Поэтому я пытаюсь скрыть последний столбец для просмотра на ноутбуке и просмотра меньшего размера, но, похоже, нет никакого способа, так как Очень большой определен как > = 1200px и экран моего ноутбука имеет ширину 1280px. Почему мой крошечный экран ноутбука уже считается «очень большим»?

Bootstrap претендует на звание «мобильного первого» фреймворка. Однако, судя по точкам останова, это макетная структура только для мобильных устройств

Нужно ли использовать медиа-запросы и пользовательские классы css, чтобы скрыть это, или все еще существует bootstrap 4 способ?

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 1

Вы можете настроить точки останова по своему вкусу:

https://getbootstrap.com/docs/4.4/layout/grid/#customizing -the-grid

Настройте значения в sass на те, которые вы хотите / нуждаетесь .

Пример:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1281px // or what ever else you want for extra large
);