- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет, сегодня немного разберём отступы margin и padding в Bootstrap 4.
Bootstrap 4 включены набор классов, с помощью которых можно просто добавлять к HTML элементам необходимые margin и padding отступы.
Именуются эти классы следующим образом:
{property}{sides}-{size} для xs;
{property}{sides}-{breakpoint}-{size} для sm, md, lg, и xl.
Вместо {property} необходимо указать первую букву названия отступа, т.е. m или p (m – для margin, p – для padding).
Вместо {sides} необходимо указать сторону (t - для задания отступа только сверху, b – снизу, l – слева, r – справа) или несколько сторон (x – слева и справа, y – сверху и снизу). Если {sides} не указать, то тогда отступ будет установлен для всех 4 сторон элемента.
Вместо {breakpoint} нужно указать контрольную точку (sm, md, lg, или xl). Другими словами, определить минимальную ширину viewport, начиная с которой, отступы, задаваемые этим классом, будут действовать.
При этом необходимо помнить, что контрольные точки задают именно минимальную ширину viewport. Это означает, что, например, класс с sm будет действовать не только на sm, но и на всех следующих контрольных точках (sm->md->lg->xl). Т.е. до тех пор, пока его действие будет не переопределено с помощью другого класса (например, с помощью lg).
Вместо {size} необходимо задать величину отступа (посредством одного из следующих значений):
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).
1. Установим HTML-элементу padding отступ сверху, равный 3:
<div class="pb-3"> ...</div>
2. Расположим 2 блока по центру. Для этого первому блоку установим в качестве свойства margin-left значение auto с помощью класса ml-auto, а второму margin-right:auto - с помощью класса mr-auto. Кроме этого дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3.
<div class="container">
<div class="row">
<!-- Первый блок -->
<div class="col-4 ml-auto mr-3 bg-success" style="height: 200px;"></div>
<!-- Второй блок -->
<div class="col-4 mr-auto ml-3 bg-danger" style="height: 200px;"></div>
</div>
</div>
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).
<div class="mx-auto my-2 my-sm-3 my-lg-4 p-3">
...
</div>
4. Установим элементу на xs margin отступ снизу, равный 4. На остальных контрольных точках этот отступ уберём, т.е. установим его, равным 0.
<div class="mb-4 mb-sm-0">
...
</div>
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).
<div class="p-0 pl-sm-3 pl-md-0 pr-sm-4">
...
</div>
Можешь почитать и вот эту статейку "Спрятать блок на мобилках"
Это тоже интересно
11.06.18Bootstrap 4 - Таймлайн
17.06.18Заголовок или логотип?
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.