Bootstrap 4 отступы: Отступы. Утилиты · Bootstrap. Версия v4.0.0

Отступы. Утилиты · Bootstrap. Версия v4.0.0

• Как это устроено
• Замечание
• Примеры
  • Горизонтальное центрирование

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.

Центрированный элемент

<div>
  Центрированный элемент
</div>

Please enable JavaScript to view the comments powered by Disqus.

Отступы. Утилиты · Bootstrap. Версия v4.3.1

• Как это устроено
• Замечание
• Примеры
  • Горизонтальное центрирование
  • Отрицательные отступы

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.

Центрированный элемент

<div>
  Центрированный элемент
</div>

Отрицательные отступы

В CSS свойства полей margin могут использовать отрицательные значения (padding не может). Начиная с версии 4. 2, мы добавляли утилиты с отрицательным запасом для каждого ненулевого целочисленного размера, указанного выше (например, 1, 2, 3, 4, 5). Эти утилиты идеально подходят для настройки желобов столбцов сетки через точки останова (breakpoints).

Синтаксис почти такой же, как у утилит с положительным запасом по умолчанию, но с добавлением n перед запрошенным размером. Вот пример класса, который противоположен .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Вот пример настройки сетки Bootstrap на средней (md) точке останова и выше. Мы увеличили заполнение .col с помощью .px-md-5, а затем противодействовали этому с .mx-md-n5 на родительском .row.

Custom column padding

Custom column padding

<div>
  <div><div>Custom column padding</div></div>
  <div><div>Custom column padding</div></div>
</div>

Please enable JavaScript to view the comments powered by Disqus.

Спейсинг · Bootstrap

• Как это работает
• Обозначение
• Примеры
  • Горизонтальное центрирование

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

Как это работает

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

Обозначение

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

Классы именуются в формате {свойство}{стороны}-{размер} для xs и {property}{sides}-{точка останова}-{размер} для sm , md , lg и xl .

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

• м — для классов, которые устанавливают запас
• p — для классов, которые устанавливают padding

Где сторон одна из:

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

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

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

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

Примеры

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

 . mt-0 {
  верхняя граница: 0 !важно;
}
.мл-1 {
  левое поле: ($spacer * .25) !важно;
}
.px-2 {
  padding-left: ($spacer * .5) !важно;
  padding-right: ($spacer * .5) !важно;
}
.p-3 {
  заполнение: $спейсер !важно;
} 

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

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

Центральный элемент

 <дел>
  Центральный элемент

 . mt-0 {
  верхняя граница: 0 !важно;
}
.мл-1 {
  левое поле: ($spacer * .25) !важно;
}
.px-2 {
  padding-left: ($spacer * .5) !важно;
  padding-right: ($spacer * .5) !важно;
}
.p-3 {
  заполнение: $спейсер !важно;
}
 

 <дел>
  Центральный элемент