Отступы

Bootstrap включает широкий диапазон сокращений откликов и полезных классов для изменения внешнего вида элемента.

Как это устроено

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

Замечание

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

Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.

Где свойство – это одно из:

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

Где свойство – это одно из:

  • 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-х сторон элемента

Где размер – это один из:

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

(Вы можете добавить больше размеров, добавляя разделы в карту Sass $spacers.)

Примеры

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

.mt-0{margin-top:0!important;}.ml-1{margin-left:($spacer*.25)!important;}.px-2{padding-left:($spacer*.5)!important;padding-right:($spacer*.5)!important;}.p-3{padding:$spacer!important;}

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

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

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