Чтобы ответить на ваш вопрос, это все, что вам нужно. см. Полную адаптивную демонстрацию с префиксом css:
/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/
@media only screen and (min-width : 481px) {
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
Чтобы добавить поддержку гибкости содержимого миниатюр в гибких столбцах, как на скриншоте выше, также добавьте это ... Обратите внимание, что вы также можете сделать это с панелями:
.flex-row .thumbnail,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.flex-text {
flex-grow: 1;
}
.flex-row img {
width: 100%;
}
Хотя flexbox не работает в IE9 и ниже, вы можете использовать демонстрацию с резервным вариантом, используя условные теги с чем-то вроде сетки javascript в качестве полифилла:
<!--[if lte IE 9]>
<![endif]-->
Что касается двух других примеров в принятом ответе ... Демонстрация таблицы - неплохая идея, но реализуется неправильно. Применение этого CSS к классам столбцов начальной загрузки, без сомнения, полностью нарушит структуру сетки. Вы должны использовать настраиваемый селектор для одного и двух стилей таблиц, которые не должны применяться к [class*='col-'] с определенной шириной. Этот метод следует использовать ТОЛЬКО, если вы хотите столбцы одинаковой высоты И одинаковой ширины. Он не предназначен для каких-либо других макетов и НЕ реагирует. Однако мы можем сделать это резервным для мобильных дисплеев ...
<div class="table-row-equal">
<div class="thumbnail">
Content...
</div>
<div class="thumbnail">
Content...
</div>
</div>
@media only screen and (min-width : 480px){
.table-row-equal {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 30px 0px;
word-wrap: break-word;
}
.table-row-equal .thumbnail {
float: none;
display: table-cell;
vertical-align: top;
width: 1%;
}
}
Наконец, первая демонстрация в принятом ответе, которая реализует версию одного истинного макета, является хорошим выбором для некоторых ситуаций, но не подходит для столбцов начальной загрузки. Причина в том, что все столбцы расширяются до высоты контейнера. Таким образом, это также нарушит отзывчивость, поскольку столбцы расширяются не до элементов рядом с ними, а до всего контейнера. Этот метод также не позволит вам больше применять нижние поля к строкам, а также вызовет другие проблемы на этом пути, такие как прокрутка до тегов привязки.
Полный код см. В Codepen, который автоматически добавляет префиксы к коду flexbox.
coderhelper.com/questions/24745966/…
На веб-сайте начальной загрузки есть статья с 5-строчным решением getbootstrap.com.vn/examples/equal-height-columns
Пример на Bootstrap ломает отзывчивость Эдуард. Гибкий диск
.rowотсутствуетflex-wrap: wrap;. Вот пример его работы с отзывчивостью: codepen.io/bootstrapped/details/RrabNeВозможное решение - прозрачное изображение шириной 1 пиксель в других столбцах. Это новое изображение шириной в один пиксель соответствует высоте в пикселях картинки кошки в приведенном выше примере. (Может не работать или быть практичным в вашей ситуации)
В Bootstrap 4 мы можем использовать карту для того же
так же, как вы делаете любой блочный элемент определенной высоты?
рабочее решение - codeply.com/p/bCpAPuS0LL