В макетах веб-дизайна очень часто используется горизонтальное выравнивание столбца в ряде(row) или контейнере. Но как это сделать, используя классы Bootstrap? Ниже приведены некоторые различные способы достижения этого эффекта.
Вы можете использовать классы Bootstrap Offset для горизонтального сдвига столбцов влево или вправо. Это полезно, когда вы хотите, чтобы один столбец имел максимальную ширину, но выравнивал его в row.
<div class="row">
<div class="col-md-8 offset-md-2">
<h3>Смотри! Я по центру</h3>
</div>
</div>
В этом примере устанавливается максимальная ширина для средних точек прерывания и до 8 столбцов в ширину. Затем я добавил класс .mx-auto, который устанавливает левое и правое поля для автоматического центрирования его горизонтально внутри контейнера .row.
<div class="row">
<div class="col-md-8 mx-auto">
<h3>И я тоже!</h3>
</div>
</div>
В этом примере я использую класс Bootstrap утилиты ширины .w-50, чтобы сделать div на 50% ширины. Затем я добавил класс .mx-auto, который устанавливает левое и правое поля для автоматического выравнивания горизонтально внутри контейнера .row.
<div class="row">
<div class="w-50 mx-auto">
<h3>Я тоже с вами!</h3>
</div>
</div>
/* Стили для отображения div */
body {
margin:2rem;
background:#e2e2e2;
}
div.row {
border:1px solid green;
background:#fff;
}
div[class^=col], div.w-50 {
border:1px solid red;
text-align:center;
}
Как и в большинстве случаев в веб-разработке, существует несколько способов достижения одного и того же результата. Выбор правильного подхода для вашего проекта зависит от того, что, по вашему мнению, легче всего запомнить и поддерживать. Лично мне нравится вариант 1, потому что он позволяет горизонтально разместить контейнер на больших экранах, а затем перейти на полную ширину на мобильных устройствах.
Смотреть в Codepen
12:44
увидел что надо добавить css стили. Почему об этом в статье ничего не сказано?
16:02