(маржа высшего класса)

у создать адаптивную сетку квадратов с помощью Bootstrap 4, для этого я делаю что-то вроде этого (одна строка):

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

И я устанавливаюcolкласс, чтобы иметь следующее правило:

.col {
    padding-top: 100%;
}

Но это создает только строку с каждым столбцом высоты области просмотра.

Это решение раньше работало, но я думаю, что оно ломает Flexbox Bootstrap 4

Есть идеи?

Ответы на вопрос(3)

чем реализовывать их самостоятельно. Зачем использовать рамки в противном случае?

Вот пример загрузочного класса mt-x, который добавляет поля в разные столбцы.

.col{
  background-color: powderblue;
  border: 1px solid black;
  height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col mt-5" ></div>
        <div class="col mt-4"></div>
        <div class="col mt-3"></div>
        <div class="col mt-2"></div>
        <div class="col mt-1"></div>
    </div>
</div>

Вы можете использоватьBootstrap4 Mt (маржа высшего класса)

Решение Вопроса
padding-bottom: 100%

width, Ширина родителя.rowширина s. Если у вас есть 5 элементов, вам нужно применитьpadding-bottom: 20%, Если они 4, вам нужноpadding-bottom: 25%, и т.д...

И, помните, если вы хотите, чтобы ваши столбцы отзывчиво, вам нужно настроитьpadding-bottom значения для каждого случая.

Гораздо проще сделать это, поместив квадратные предметы внутриcols. Таким образом, они всегда будут квадратами относительно текущей ширины столбца:

.square {
  padding-bottom: 100%;
}
.orange {background-color: orange;}
.orangered {background-color: orangered;}
.gold {background-color: gold;}
.darkorange {background-color: darkorange;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row no-gutters">
        <div class="col"><div class="square orange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
        <div class="col"><div class="square gold"></div></div>
        <div class="col"><div class="square darkorange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
    </div>
</div>

Теперь вы можете безопасно добавлять классы реагирования в ваши столбцы, квадраты останутся квадратами относительно текущей ширины столбца.

Запись Я также добавилno-gutters класс дляrow удалитьcol значения отступа влево / вправо.+ Изменитьcontainer вcontainer-fluid если вы хотите, чтобы контейнер имел полную ширину страницы.
 Mauricio Machado30 мар. 2018 г., 02:44
Именно то, что я искал, спасибо!

Пример приведен на официальном сайте Bootstrap

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Ваш ответ на вопрос