Как я могу сделать колонки Bootstrap одинаковой высоты?

965

Я использую Bootstrap. Как я могу сделать три колонки одинаковой высоты?

Вот скриншот проблемы. Я хотел бы, чтобы синие и красные столбцы были такой же высоты, как и желтый столбец.

Три загрузочных столбца с центральным столбцом длиннее двух других столбцов

Вот код:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

Ричард
источник
11
На сайте начальной загрузки есть статья с 5- строчным
Эдуард Гамонал
2
Пример на Bootstrap ломает отзывчивость Эдуарда. Сгибание .rowотсутствует flex-wrap: wrap;. Вот пример того, как он работает с отзывчивостью: codepen.io/bootstrapped/details/RrabNe
Брайан Уиллис
Возможный обходной путь - Прозрачное изображение шириной 1 пиксель в других столбцах. Это новое изображение шириной в один пиксель соответствует высоте пикселя изображения кота в приведенном выше примере. (Может не работать или быть практичным в вашей ситуации)
Sql Surfer
В Bootstrap 4 мы можем использовать одну и ту же карту
Amjad Rehman A

Ответы:

1045

Решение 4 с использованием Bootstrap 4

Bootstrap 4 использует Flexbox, поэтому нет необходимости в дополнительном CSS.

демонстрация

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Решение 1 с использованием отрицательных полей (не нарушает отзывчивость)

демонстрация

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Решение 2 с использованием таблицы

демонстрация

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Решение 3 с использованием flex добавлено в августе 2015 года. Комментарии, опубликованные ранее, не относятся к этому решению.

демонстрация

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
Popnoodles
источник
7
Думайте об этом как о колонне, втянутой в негативное пространство. Если вы удалите переполнение, вы увидите, что происходит.
Popnoodles
9
Если вы нацелены на класс столбца начальной загрузки, вам, вероятно, следует использовать якорь ^ вместо подстановочного знака *. Использование ^ скажет, что класс должен начинаться с col, где показанный подстановочный знак будет соответствовать любому классу с любым местом в строке, что может иметь нежелательные эффекты для стилей, где вы, возможно, использовали соглашение col-. (т. е. материал-col-morestuff).
Логан Г.
7
Хороший ответ, с некоторыми оговорками. Решение 1 отключает float и, следовательно, нарушает поведение адаптивной сетки начальной загрузки. Решение 2 (более подробно объяснено в positioniseverything.net/articles/onetruelayout/equalheight ) не показывает нижнюю границу (так как оно отсечено где-то в области отступа).
Охад Шнайдер
14
Решение 3 нарушает отзывчивость строк.
СПРБР
10
@Popnoodles вы должны добавить flex-wrap: wrap;в третий пример, чтобы включить отзывчивость. Вы также захотите добавить display: flex; flex-direction: столбец; к классу столбцов. Если вы собираетесь использовать .row, а не пользовательский класс, вам нужно будет предоставить запасной вариант для более старых браузеров, изменив дисплей обратно. Вот пример
Брайан Уиллис
321

Обновление 2020

Лучший подход для Bootstap 3.x - использование CSS flexbox (и требует минимального CSS).

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Пример начальной загрузки Flexbox

Чтобы применить Flexbox одинаковой высоты только к определенным точкам останова (отзывчивым), используйте медиазапрос. Например, вот sm(768px) и выше:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

Это решение также хорошо работает для нескольких строк (перенос столбцов):
https://www.bootply.com/gCEXzPMehZ

Другие обходные пути

Эти варианты будут рекомендованы другими, но не являются хорошей идеей для адаптивного дизайна. Они работают только для простых однострочных макетов без переноса столбцов.

1) Использование огромных отрицательных полей и отступов

2) Использование display: table-cell (это решение также влияет на адаптивную сетку, поэтому запрос @media можно использовать, чтобы применить tableотображение только на более широких экранах до вертикального размещения столбцов)


Bootstrap 4

Flexbox теперь используется по умолчанию в Bootstrap 4, поэтому нет необходимости в дополнительном CSS для создания столбцов одинаковой высоты: http://www.codeply.com/go/IJYRI4LPwU

Пример:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>
Zim
источник
5
Вы можете использовать медиа-запрос, чтобы применять flexbox только на более крупных устройствах. Я обновил bootply: bootply.com/Cn6fA6LuTq
Zim
На случай, если кому-то интересно, я создал перо, чтобы продемонстрировать аналогичные эффекты на форме с помощью flexbox.
Джастин Лау
2
Это известная ошибка Safari с flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730
Zim
5
@ Стэнли комментарий о "больше не реагирует" устарел и не имеет значения.
Зим
1
Это единственное исправление, которое сработало для меня. Спасибо, Зим, это здорово!
Ryan NZ
83

JavaScript не требуется. Просто добавьте класс .row-eq-heightк вашему существующему .rowтак:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Совет: если в строке более 12 столбцов, сетка начальной загрузки не сможет ее обернуть. Так что добавляйте новые div.row.row-eq-heightкаждые 12 столбцов.

Совет: вам может понадобиться добавить

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

на ваш HTML

Кевин Р.
источник
5
Flexbox основе. Не работает ни в IE8, ни в 9, ни в Android 2.x caniuse.com/#feat=flexbox
Крис Москини
60
Примечание: getbootstrap.vn не является "Bootstrap". Это сторонний проект.
Зима
Похоже, это интегрировано в bootstrap v4.
Кирилл Дюшон-Дорис
Я включил правильный CSS (с сайта .vn), но он все испортил. это основано на flex
ekkis
Отлично ... плагин, черт возьми.
Армада
63

Чтобы ответить на ваш вопрос, это все, что вам нужно, чтобы увидеть полную отзывчивую демонстрацию с префиксом 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;
    }
}

Снимок экрана Codepen

Чтобы добавить поддержку для содержимого эскиза 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 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.

Брайан Уиллис
источник
11
Это единственный ответ, который действительно работал для меня. 3 самых популярных ответа были пустой тратой времени
ken2k
3
Выглядит хорошо, но, к сожалению, он не работает в Safari 9.1 на MacOS :-(
KevinH
1
@ TheSchecke здесь это исправить. Насколько я знаю, это работает во всех браузерах, поддерживаемых flexbox. Пожалуйста, дайте мне знать, если я ошибаюсь. s.codepen.io/bootstrapped/debug/pboJNd . Проблема была связана с row:after, row:beforeнабором display: table, который явно не нравится Safari.
Брайан Уиллис
2
Просто на голову, что это действительно плохо работает в браузере Safari на iPad
Мэтью Локк
1
Жаль слышать, что @MatthewLock. Я только что проверил на своем IPad Air IOS 8.1 с последним сафари, и это работает на этом. Я также смог протестировать на crossbrowsertesting.com, используя iPad mini retina с Safari 7, и это тоже работает нормально. Вот результаты этого теста. Можете ли вы предоставить версию для iPad и Safari, которую вы используете? Я хотел бы попытаться исправить это как можно скорее или хотя бы добавить комментарий в ответ, поскольку я знаю, что многие люди используют его.
Брайан Уиллис
42

Вы показываете только одну строку, поэтому ваш вариант использования может быть ограничен только этим. На случай, если у вас несколько строк, этот плагин - github Javascript-grid - работает отлично! Это заставляет каждую панель расширяться до самой высокой панели, давая каждой строке потенциально различную высоту, основанную на самой высокой панели в этом ряду. Это решение jquery против css, но я хотел рекомендовать его как альтернативный подход.

globalSchmidt
источник
1
Единственное решение, которое действительно работает, и оно не нарушает отзывчивость
Артур Кендзиор
Позволяет ли это указать, что столбцы должны быть квадратными или иметь одинаковую высоту?
niico
@niico 14 - с тех пор, как я это использовал, прошло некоторое время, но в моем приложении требовалось, чтобы элементы в каждом ряду были одинаковой высоты, но высота может варьироваться от строки к строке. Так как высота является функцией элементов в строке, если высота вашего элемента равна их ширине, то они должны быть представлены в виде квадратов.
globalSchmidt
30

Если вы хотите, чтобы это работало в любом браузере, используйте javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});
paulalexandru
источник
1
Есть один div class = "row" с переменным количеством панелей каждого класса "col-md-4", который должен дать мне 3 столбца и неизвестное количество строк, в зависимости от количества элементов, которые я хочу перечислить. Этот JS работал и требует минимальных изменений в моем HTML / CSS, в отличие от различных штук CSS, которые я пробовал. Единственное, что я изменил, - это пометил все мои панели столбцов дополнительным классом, то есть «панель одинаковой высоты», а затем использовал $ («.
Same
1
Единственное решение, которое сработало для меня после одного дня экспериментов с CSS.
Динозавр
1
Это хорошее решение, но .ready()сейчас не время его называть - его нужно вызывать.load()
jave.web
1
@ jave.web Если вы считаете, что это хорошее решение, пожалуйста, подождите. Спасибо
paulalexandru
Используйте window.onload = function() {...function content above...}вместо этого. Это работает лучше.
Blackpanther0001
10

Я попробовал много предложений, сделанных в этой теме и на других страницах, но ни одно решение не работало на 100% во всех браузерах.

Поэтому я довольно долго экспериментировал и придумал это. Полное решение для столбцов Bootstrap Equal Height с помощью flexbox только с 1 классом. Это работает во всех основных браузерах IE10 +.

CSS:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

Для поддержки еще большего количества версий IE вы можете, например, использовать https://github.com/liabru/jquery-match-height и настроить таргетинг на все дочерние столбцы .equal-cols. Нравится:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

Без этого polyfill столбцы будут вести себя как обычные столбцы Bootstrap, что является довольно хорошим запасным вариантом.

Адам Линдквист
источник
Это сработало блестяще для меня. Спасибо!
Рандлет
8

Вы также можете использовать inline-flex, который работает довольно хорошо и может быть немного чище, чем модифицировать каждый элемент строки с помощью CSS.

Для моего проекта я хотел, чтобы все строки, чьи дочерние элементы имели одинаковую высоту, чтобы границы выглядели неровными. Для этого я создал простой класс CSS.

.row.borders{
    display: inline-flex;
    width: 100%;
}
Штеффан Перри
источник
2
В то время как это удается сделать все содержимое в строке одинаковой высоты; Это нарушает отзывчивость Bootstrap.
Christine268
7

Нахальное решение JQuery, если кому-то интересно. Просто убедитесь, что у всех ваших cols (el) есть общее имя класса ... тоже работает быстро, если вы связываете его с $ (window) .resize

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

Применение

$(document).ready(function(){
   equal_cols('.selector');
});

Примечание. Это сообщение было отредактировано в соответствии с комментарием @Chris, согласно которому в коде была установлена ​​только последняя наибольшая высота в $.each()функции.

Marty
источник
Это недооценивается - простой и маленький, но при этом размер всех столбцов изменяется без необходимости иметь фиксированное количество столбцов в строке. Хороший!
Джордон
1
Это не работает, потому что вы устанавливаете последнюю наибольшую высоту в каждой функции. Если третий столбец является самым высоким столбцом, столбцы 1 и 2 не получают правильную высоту. Вы должны установить последнюю строку "$ (this) .css ({'height': h});" после каждой функции. Я сделаю правку.
Крис
7

Некоторые из предыдущих ответов объясняют, как сделать div одинаковой высоты, но проблема в том, что когда ширина слишком узкая, div не будут складываться, поэтому вы можете реализовать их ответы с помощью одной дополнительной детали. Для каждого из них вы можете использовать имя CSS, данное здесь, в дополнение к используемому вами классу строки, поэтому div должен выглядеть следующим образом, если вы всегда хотите, чтобы div был рядом друг с другом:

<div class="row row-eq-height-xs">Your Content Here</div>

Для всех экранов:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

Когда вы хотите использовать см:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

Когда ты хочешь md:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

Когда вы хотите использовать LG:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

РЕДАКТИРОВАТЬ На основе комментария, действительно, существует более простое решение, но вы должны убедиться, что информация столбца от наибольшей желаемой ширины для всех размеров до xs (например <div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
Захари Вейксельбаум
источник
Вы сделали это намного сложнее, чем нужно :) «Просто используйте, flex-wrap: wrap;тогда вам не нужны все отдельные ... если только вы не хотите их специально.
Брайан Уиллис
это терпит неудачу на iPad Safari
Мэтью Локк
6

Я удивлен, что не смог найти достойное решение здесь в конце 2018 года. Я пошел дальше и сам нашел решение для Bootstrap 3, используя flexbox.

Чистый и простой пример:

Пример согласованной ширины столбца в Bootstrap 3

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

Посмотреть рабочую демонстрацию: http://jsfiddle.net/5kmtfrny/

BuffMcBigHuge
источник
5

Я знаю, что очень поздно, но теперь вы можете использовать атрибут стиля "min-height" для достижения своей цели.

Файз
источник
5

Если кто-то использует bootstrap 4 и ищет столбцы одинаковой высоты, просто используйте row-eq-heightдля родительского div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

Ссылка: http://getbootstrap.com.vn/examples/equal-height-columns/

Znaneswar
источник
3

вот мое решение (скомпилированный CSS):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

Итак, ваш код будет выглядеть так:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

По сути, это та же система, которую вы используете с .col-*классами с той разницей, которую вам нужно применить.row-* классы к самой строке.

С .row-sm-eqколонками будут складываться на экранах XS. Если вам не нужно, чтобы они были сложены на экранах, которые вы можете использовать .row-xs-eq.

Версия SASS, которую мы действительно используем:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Live демо


Примечание: смешивание .col-xs-12и .col-xs-6внутри одного ряда не будет работать должным образом.

Александр С.
источник
Это хорошо. Мое решение такое же. И есть возможность иметь столбцы одинаковой высоты со стандартными интервалами Bootstrap в 30 пикселей между столбцами, использующими border-spacingи отрицательными полями.
максимум
3

Существует проблема с использованием решения 1 при применении его только к столбцу в строках. Хотелось бы улучшить Решение 1.

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(Извините, не могу прокомментировать ответ Popnoodles. У меня недостаточно репутации)

Станислав Пономарев
источник
2

Лучший там:

Github reflex - Docs

Работает с начальной загрузкой

Обновить:

  1. Включить CSS
  2. Обновите ваш код:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: ldjordan@gmail.com
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

оБЛ
источник
Добро пожаловать в переполнение стека! Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится. Посмотрите, как мне написать хороший ответ .
ByteHamster
2

Вот мой метод, я использовал flex с некоторыми изменениями в медиа-запросах.

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

затем добавил классы к родителю, которые были необходимы.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Я использую отзывчивые контрольные точки, потому что поток обычно мешает стандартному адаптивному характеру начальной загрузки.

Аджай Сатиш
источник
2

Я использую это супер простое решение с clearfix , которое не имеет побочных эффектов.

Вот пример на AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

И еще один пример на PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>
Олег
источник
Это не делает ваши столбцы все одинаковой высоты, хотя.
скерит
1
Для меня, желающего иметь столбцы на одной высоте / месте в ряду, это решение
Михал - wereda-net
2

Для тех, кто ищет быстрое и простое решение - если у вас есть относительно непротиворечивый набор содержимого блока, проще установить минимальную высоту в div, которая немного больше, чем самый большой блок.

.align-box {
    min-height: 400px;
}
Нил
источник
2

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

где .container-height - это класс стиля, который должен быть добавлен к элементу стиля .row, к которому все его дочерние элементы .col * имеют одинаковую высоту.

Применение этих стилей только к некоторому конкретному .row (с .container-height, как в примере) также позволяет избежать применения переполнения полей и отступов ко всем .col *.

DarkScrolls
источник
2

Я искал решение той же проблемы, и нашел один только что работал! - почти без дополнительного кода ..

см. https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 для хорошего понимания и с нужным вам resposne внизу, со ссылкой.

https://www.codeply.com/go/EskIjvun4B

это был правильный способ реагирования для меня ... цитата: ... 3 - Используйте flexbox (лучше всего!)

Начиная с 2017 года, лучший (и самый простой) способ сделать столбцы одинаковой высоты в адаптивном дизайне - использовать CSS3 flexbox.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

и просто используйте:

div class="container">
   <div class="row display-flex .... etc..
к.ф.н.
источник
1
@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

Пример:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Адаптировано из нескольких ответов здесь. Ответы на основе flexbox - правильный путь после смерти IE8 и 9, а также после смерти Android 2.x, но это не так в 2015 году и, скорее всего, не будет в 2016 году. IE8 и 9 по-прежнему составляют 4- 6% использования в зависимости от того, как вы измеряете, и для многих корпоративных пользователей это намного хуже. http://caniuse.com/#feat=flexbox

display: table, display: table-cellТрюк более обратная совместимость - и одна большая вещь , единственный серьезная проблема совместимости является проблемой Safari , где это сила box-sizing: border-box, что - то уже применяется в теги Bootstrap. http://caniuse.com/#feat=css-table

Очевидно, вы можете добавить больше классов, которые делают подобные вещи, например .equal-height-md. Я связал их с div для небольшого выигрыша в производительности при моем ограниченном использовании, но вы можете удалить тег, чтобы сделать его более обобщенным, как и остальная часть Bootstrap.

Обратите внимание, что jsfiddle здесь использует CSS, и поэтому вещи, которые Less мог бы предоставить в противном случае, жестко запрограммированы в связанном примере. Например, @ screen-sm-min был заменен на то, что вставил бы Less - 768px.

Крис Москини
источник
1

Если это имеет смысл в вашем контексте, вы можете просто добавить пустой div из 12 столбцов после каждого перерыва, который действует как разделитель, который соединяет нижнюю часть самой высокой ячейки в вашем ряду.

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

Надеюсь это поможет!

Крис Стэйкос
источник
Это не отвечает на вопрос, который он задал!
Эллисан
0

Думаю, я бы просто добавил, что ответ, данный Dr.Flink, также можно применить к form-horizontalблоку Bootstrap 3 - что может быть очень удобно, если вы хотите использовать цвета фона для каждой ячейки. Для того, чтобы это работало для форм начальной загрузки, вам нужно будет обернуть содержимое формы, которое просто служит для репликации табличной структуры.

В приведенном ниже примере также представлен CSS, который демонстрирует дополнительный медиа-запрос, позволяющий Bootstrap 3 просто захватить и сделать это нормально на меньших экранах. Это также работает в IE8 +.

Пример:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}
JoeTidee
источник
0

Попробуй это сделать через flex-box

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}
<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

grinmax
источник
0

Так что да, Bootstrap 4 делает все столбцы в строке равными по высоте, однако, если вы создаете рамку вокруг содержимого внутри строки, вы можете обнаружить, что столбцы выглядят как равные высоты!

Когда я применил height: 100%элемент внутри col, я обнаружил, что потерял поле.

Мое решение состоит в том, чтобы использовать padding для div элемента col (вместо поля на внутреннем элементе). Вот так:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

В приведенном выше примере кода Bootstrap 4.1 используется для создания набора из девяти блоков с рамкой

Дагмар
источник
0

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});
Pacific P. Regmi
источник
0

03/19/2019

** Bootstrap 4 Решение по равной высоте **

Bootstrap Utilities / flex для одинаковой высоты

Живой пример в Codepen

Равная высота по классу начальной загрузки с фиксированным родительским div heightилиmin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

Доктор медицинских наук Ашик
источник
3
Почему вы даете мне отрицательный голос. Вы можете сделать комментарий для этого?
Доктор медицины Ашик
-1

Вы можете обернуть столбцы внутри div

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>
Том Кур
источник
У меня не работала кнопка с одним из столбцов.
Рэй Хантер