Bootstrap 4 убрать отступы

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

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

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

Замечание

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

Классы названы по формату — для xs и —— для 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 .)

Примеры

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

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

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

Статья, в которой рассмотрим классы Bootstrap 4, с помощью которых можно не только очень просто, но и адаптивно добавлять margin и padding отступы.

Синтаксис классов для задания margin и padding отступов

Bootstrap 4 включает в себя набор классов, с помощью которых можно очень легко добавлять к HTML элементам необходимые margin и padding отступы.

Именуются эти классы следующим образом:

Вместо необходимо указать первую букву названия отступа, т.е. m или p ( m – для margin , p – для padding ).

Вместо необходимо указать сторону ( t — для задания отступа только сверху, b – снизу, l – слева, r – справа) или несколько сторон ( x – слева и справа, y – сверху и снизу). Если не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо нужно указать контрольную точку ( sm , md , lg , или xl ). Другими словами, определить минимальную ширину viewport, начиная с которой, отступы, задаваемые этим классом, будут действовать.

При этом необходимо помнить, что контрольные точки задают именно минимальную ширину viewport. Это означает, что, например, класс с sm будет действовать не только на sm , но и на всех следующих контрольных точках ( sm -> md -> lg -> xl ). Т.е. до тех пор, пока его действие будет не переопределено с помощью другого класса (например, с помощью lg ).

Вместо необходимо задать величину отступа (посредством одного из следующих значений):

• 0 (равно 0 );
• 1 (равно $spacer * .25 );
• 2 (равно $spacer * .5 );
• 3 (равно $spacer );
• 4 (равно $spacer * 1.5 );
• 5 (равно $spacer * 3 );
• auto (равно auto ) — можно использовать только для margin .

$spacer — это SCSS переменная Bootstrap 4, значение которой, по умолчанию, равно 1rem. А 1rem в большинстве браузеров равен 16px. В итоге, например, размер 4 будет равен 24px (16px * 1.5).

Примеры использования

Рассмотрим примеры использования классов Bootstrap для установления HTML-элементам padding и margin оступов.

Пример 1. Установим HTML-элементу padding отступ сверху, равный 3:

Пример 2. Расположим 2 блока по центру. Для этого первому блоку установим в качестве свойства margin-left значение auto с помощью класса ml-auto , а второму margin-right:auto — с помощью класса mr-auto . Кроме этого дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3 .

Пример 3. Установим блоку:

• margin отступы слева и справа, равные auto ( mx-auto );
• на xs margin отступы сверху и снизу, равные 2 ( my-2 );
• на sm и md (т.е. >sm ) margin отступы сверху и снизу, равные 3 ( my-sm-3 );
• на lg и xl (т.е. >lg ) margin отступы сверху и снизу, равные 4 ( my-lg-4 );
• на всех контрольных точках padding отступы для 4 сторон, равные 3 ( p-3 ).

Пример 4. Установим элементу на xs margin отступ снизу, равный 4. На остальных контрольных точках этот отступ уберём, т.е. установим его, равным 0.

Пример 5. Установим HTML-элементу:

• по умолчанию ( min-width >= 0 или xs ) padding отступы, равные 0 ( p-0 );
• на sm и следующих контрольных точках padding отступ слева, равный 3( pl-sm-3 );
• на md и следующих контрольных точках (т.е. >md ) margin уберём отступ слева (установим его равным 0, т.е. pl-md-0 ) и добавим отступ справа, равный 4 ( pr-sm-4 ).

В 4-й версии Bootstrap разработчики решили создать ряд классов, которые позволяют увеличивать внутренний ( padding ) и внешний ( margin ) отступ для блочных ( display: block ) или строчно-блочных элементов ( display: inline-block ).

Эти классы получили название "утилит расстояния" (Spacing utilities) и позволяют изменять отступы в пределах от .25rem до 3rem. Классы для управления отступами позволяют назначить их как по вертикальным, так и по горизонтальным сторонам. Их названия тесно связаны с соответствующими css-свойствами, а именно начинаются с буквы:

• 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
• без буквы — для классов, устанавливающих 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

По умолчанию, переменная $spacer имеет значение 1rem . Т.е. значения величин отступов меняются от 0.25rem до 3rem с шагом, который увеличивает предыдущее значение вдвое. Подразумевается, что используется стандартный шрифт размером в 16px. Соответственно, отступы имеют значения от 4px до 48px.

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

Следует отметить, что классы отступов предполагают еще указание классов адаптивной сетки ( -md-, -sm-, -lg-, -xl- ) для того, чтобы отступы в элементах существовали только для определенных разрешений экранов. Например, необходимо добавить отступ снизу только для экранов смартфонов, но убрать его на всех остальных разрешениях экранов: