Как я могу сделать колонки Bootstrap одинаковой высоты?
Чтобы ответить на ваш вопрос, это все, что вам нужно, чтобы увидеть полную отзывчивую демонстрацию с префиксом 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, как на скриншоте выше, также добавьте следующее… Обратите внимание, что вы можете сделать это и с панелями:
.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>
<div>
Content...
</div>
<div>
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.
Как я могу сделать колонки Bootstrap одинаковой высоты?
Чтобы ответить на ваш вопрос, это все, что вам нужно, чтобы увидеть полную отзывчивую демонстрацию с префиксом 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, как на скриншоте выше, также добавьте следующее… Обратите внимание, что вы можете сделать это и с панелями:
.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>
<div>
Content...
</div>
<div>
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.
Как Выровнять высоту колонок в bootstrap? — Хабр Q&A
Есть несколько блоков (для примера 2) в 1 ряд:<div> <div> <div> <div> <div> <div> <div> <div> <div > <div> <h5>Заголовок 1</h5> </div> </div> </div> <div> <div> ТУТ КАРТИНКА </div> <div> <div> <div> <p> 1 строка текста </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div> <div> <div> <div> <div> <div > <div> <h5>Заголовок 2</h5> </div> </div> </div> <div> <div> ТУТ КАРТИНКА </div> <div> <div> <div> <p> Много строк текста. Много строк текста.Много строк текста.Много строк текста. </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Проблема в том, что высота блока, зависит от контента, который в нем размещается, например от высоты картинки/количества текста, как сделать так, чтобы высота блоков была такая, как наибольший по высоте блок? Т.е. чтобы все блоки в ряду были одинаковых размеров. Может быть в bootstrap есть спец. решение этой проблемы? Пробовал так: Как Выровнять высоту колонок в bootstrap?, не помогло.
Вот пример:
Колонки bootstrap съезжают вниз при одинаковой размерности. Почему? — Хабр Q&A
Добрый день. Имеется блок на бустрапе следующего вида:<div>
<div>
<div>
<div>
<div>
<div>
<div>
<img src="https://site.com/images/icons/new/fx-pairs.png">
<p>90+ Fx pairs</p>
</div>
</div>
<div>
<div>
<img src="https://site.com/images/icons/new/fx-pairs.png">
<p>35+ Stocks</p>
</div>
</div>
<div>
<div>
<img src="https://site.com/images/icons/new/fx-pairs.png">
<p>18+ Metals</p>
</div>
</div>
<div>
<div>
<img src=src="https://site.com/images/icons/new/fx-pairs.png">
<p>47+ CFDs</p>
</div>
</div>
<div>
<div>
<img src="https://site.com/images/icons/new/fx-pairs.png">
<p>40+ Indices</p>
</div>
</div>
<div>
<div>
<img src="https://site.com/images/icons/new/fx-pairs.png">
<p>24+ Crypto</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Т.е. колонки все ровные, показываться должно тоже все ровно, каких-то дополнительных оступов у элементов внутри .col нет. НО. Почему-то при определенной ширине экрана, некоторые колонки съезжают на следующую строку, как будто им не хватает места в строке. Для начала продемонстрирую как всё выглядит (почти при любом расширении экрана все ок, но в каких-то диапозонах ширины, колонки съезжают на строку вниз)
Итак, большой экран выглядит так, тут все норм:
Средний экран, тут все норм:
Маленький экран, тут все норм:
Тоже маленький экран, но на такой ширине колонка съезжает:
Подскажите пожалуйста, из за-чего это происходит и как это исправить?
Две колонки одинаковой высоты — Bootstrap — CSS
В настоящее время я создаю коробку продуктов с двумя столбцами рядом друг с другом, оставив один образ продукта и право одного описания продукта.
Основная проблема заключается в том, что я пытаюсь сделать описание продукта той же самой высоты, что и изображение, но после нескольких попыток я не приблизился к его решению, потому что он должен быть отзывчивым. Я пробовал много решений, но все еще застрял, самый близкий из них использовал медиа-запросы и применял высоту к .product-det но похоже, что это не лучший способ.
Я создал Bootply в качестве демонстрации.
Синяя рамка должна достигать нижней части обертки.
HTML
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<img src="http://placehold.it/250x250">
</div>
<div>
<div> <a href="#" title=""><h5>Article pokeball superpotion lighting boltubertext pokemon pikachu</h5></a>
<div
> <span>
<i></i>
</span>
</div>
<div>
<div>
<div>ITEMID</div>
<div>
<div>
<input placeholder="qnt" type="text"> <span>
<button type="button">
<span></span>
</button>
</span>
</div>
</div>
<div><span>3.203 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>Right content</div>
</div>
CSS
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.padding-15 {
padding: 15px;
}
.padding-t-15 {
padding-top: 15px;
}
.margin-b-15 {
margin-bottom: 15px;
}
.border-default{
border: 1px solid #e0e0e0;
}
.padding-t-0 {
padding-top: 0px;
}
.padding-b-0 {
padding-bottom: 0px;
}
.nopadding {
padding: 0;
}
.line-h-35 {
line-height: 35px;
}
.border-l-default {
border-left: 1px solid blue;
}