Использование служебных классов интервалов в Bootstrap

В Bootstrap служебные классы интервалов позволяют легко управлять интервалами вокруг элементов. Однако, если у вас возникли проблемы с их использованием, вот руководство, которое поможет вам.

Обновленный синтаксис пробелов (Bootstrap 4 и 5)

Bootstrap 4 представил упрощенный синтаксис для служебных классов размещения:

Поля:
m{стороны}-{размер}

Отступы:
p {sides}-{size}

Например:
mb-2 = 2 единицы интервала внизу поля
p-1 = заполнение всех сторон 1 единицей интервала

Bootstrap 5 включает Поддержка RTL, что приводит к изменению префиксов для конкретных направлений:

*pl-* = ps-* (start)
*pr-* = pe-* (end)
*ml- * = ms-* (start)
*mr-* = me-* (end)

Адаптивный интервал

Теперь вы можете применять интервалы к определенным точкам останова используя следующий синтаксис:

Поля:
m{стороны}-{точка останова}-{размер}

Отступы:
p{стороны}-{точка останова}-{размер}

Например:
mt-md-2 = отступ для двух верхних единиц интервала на средних экранах и выше

Пример в MeteorJS с React

Если вы используете MeteorJS с React, убедитесь, что установлен пакет bootstrap-spacer:

meteor npm install bootstrap-spacer

Затем импортируйте служебные классы пробелов в свой компонент:

import { spacers } from "bootstrap-spacer";

Используйте служебные классы так же, как в стандартном HTML:

  ...

Устранение неполадок

• Если классы пространства не работают, убедитесь, что пакет bootstrap-spacer установлен и импортирован в ваш компонент.
• Убедитесь, что имена используемых вами классов соответствуют обновленному синтаксису.
• Дополнительную информацию и примеры см. в соответствующей документации.