Расстояния

Назначьте удобные для ответа значения margin или padding элементу или подмножеству его сторон со стенографическими классами. Включает поддержку отдельных свойств, всех свойств и свойств по вертикали и горизонтали. Классы построены из карты по умолчанию Sass от 25rem до 3rem.

Обозначения

Утилиты расстояния, которые применяются ко всем точкам останова, от xs до xl, не имеют аббревиатуры останова в них. Это происходит потому, что эти классы применяются от min-width: 0 и выше и, следовательно, не связаны с медиа-запросом. Остальные точки останова, однако, включают аббревиатуру точки останова.

Имена классов присваиваются с использованием формата {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg, и xl.

Где property является одним из:

• m - для классов, которые задают margin
• p - для классов, которые задают padding

Где sides является одним из:

• t - для классов, которые задают margin-top или padding-top
• b - для классов, которые задают margin-bottom или padding-bottom
• l - для классов, которые задают margin-left или padding-left
• r - для классов, которые задают margin-right или padding-right
• x - для классов, которые задают *-left и *-right
• y - для классов, которые задают *-top и *-bottom
• blank - для классов, которые задают margin или padding на всех 4 сторонах элемента

Где size является одним из:

• 0 - для классов, которые устраняют margin или padding, установив его 0
• 1 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * .25 или $spacer-y * .25
• 2 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * .5 или $spacer-y * .5
• 3 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x или $spacer-y
• 4 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 2 или $spacer-y * 2
• 5 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 4 или $spacer-y * 4
• 6 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 8 или $spacer-y * 8
• 7 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 16 или $spacer-y * 16

(Вы можете добавить больше размеров путем добавления записей в $spacers переменной Sass map)

Примеры

Вот некоторые примеры этих классов:

    <div  class="sf-example">
      <p class="mt-0">Margin top 1</p>
      <p class="ml-1">Margin left 1</p>
      <p class="m-4">Margin 4</p>
      <p class="px-2">Padding right 2</p>
      <p class="p-3">Padding 3</p>
      <p class="pb-3">Padding bottom 3</p>
      <p class="pt-2">Padding top 2</p>
    </div>

Горизонтальное центрирование

Кроме того, Bootstrap также включает класс .mx-auto для горизонтального центрирования содержимого уровня блока фиксированной ширины, то есть контента, который имеет display: block и установленную width — установив горизонтальные поля в auto.

<div class="mx-auto" style="width: 200px;">
    Центрирование элемента
</div>