Блог

Главная - Вопросы по программированию - Каков класс для минимальной ширины с использованием Bootstrap 5?

Каков класс для минимальной ширины с использованием Bootstrap 5?

#bootstrap-5

#начальная загрузка-5

Вопрос:

Я просмотрел документацию для Bootstrap 5, но, похоже, я не могу найти класс минимальной ширины с использованием пикселей? Есть ли они вообще?

https://v5.getbootstrap.com/docs/5.0/utilities/sizing/

Комментарии:

1. Такого класса нет. Для этого вам придется использовать пользовательский CSS.

Ответ №1:

  • Макет сетки Bootstrap CSS выполняет тяжелую работу с точки зрения установки адаптивных точек останова.
  • Каждый элемент представления / страницы / интерфейса можно разделить на 12 частей. и вы можете выбрать, сколько места занимает контейнер из 12 вертикальных столбцов.
  • Bootstrap 5 дает вам 6 предопределенных точек останова со следующим синтаксисом
     col-xs-{number-between-1-to-12}  width <= 540px
    col-sm-{number-between-1-to-12}  max-width = 540px
    col-md-{number-between-1-to-12}  max-width = 720px
    col-lg-{number-between-1-to-12}  max-width = 960px
    col-xl-{number-between-1-to-12}  max-width = 1140px
    col-xxl-{number-between-1-to-12} width <= 1400px

Пример 1: Вы получаете родительский div с 2 дочерними подразделениями, эти дочерние элементы будут занимать равное разделенное пространство внутри для всех размеров экрана

 <div id="i-am-a-parent-div"> 
    
   <div class="col-6"> This takes First Half the Space inside parent element</div>

   <div class="col-6"> This takes Second Half the Space inside parent element</div>

</div>

Пример 2: Дочерние подразделения будут разделять 6/12 пространства каждый до max-width = 540, но затем они изменят занятие пространства на 4/12 и 8/12 соответственно.
ПРИМЕЧАНИЕ: я добавил два отдельных класса для каждого дочернего элемента, вы можете добавить столько, сколько необходимо для каждой точки останова.

 <div>
    <div class="col-sm-6 col-md-4"> This takes First Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take One-Thirds (4/12) the space between 540px amp; 768px </div>
    
    <div class="col-sm-6 col-md-8"> This takes Second Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take Two-Thirds (8/12) the space between 540px amp; 768px </div>
</div>

Если это не удовлетворяет тому, что вам нужно сделать, тогда есть больше вариантов настройки для их точек останова, не стесняйтесь проверять: https://v5.getbootstrap.com/docs/5.0/layout/grid/#grid-options

Дайте мне знать, если это вам поможет!

Метки: