0

Как автоматически располагать блоки максимально по центру при помощи boostrap? Количество блоков каждый раз может быть разным. Как вообще называется такое расположение блоков? Максимум блоков в ширину должно быть 3. Вот пример: введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения А на малых экранах они должны выстраиваться по 1 вообще.

1

1 ответ 1

0

Используйте 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.