Как автоматически располагать блоки максимально по центру при помощи boostrap? Количество блоков каждый раз может быть разным. Как вообще называется такое расположение блоков? Максимум блоков в ширину должно быть 3. Вот пример:
А на малых экранах они должны выстраиваться по 1 вообще.
-
1getbootstrap.com/docs/4.3/utilities/flex/#justify-content– entithat20 июл 2019 в 13:36
Добавить комментарий
|
1 ответ
Используйте display: flex
для расположения блоков таким образом. И выравнивайте с помощью justify-content
и align-items
. bootstrap
делает данные операции с помощью строк(row
) и колонок(col
)
.blocks {
height: 400px;
margin-left: -30px;
margin-right: -30px;
}
.block {
background-color: #000;
margin-bottom: 20px;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="blocks row w-100 justify-content-center">
<div class="block col-3">1</div>
<div class="block col-3">2</div>
<div class="block col-3">3</div>
<div class="block col-3">4</div>
</div>