Как сделать столбцы Bootstrap одинаковой высоты?

avatar
Richard
30 октября 2013 в 23:31
1087176
34
1067

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

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

Three bootstrap columns with the center column longer than the other two columns

Вот код:

<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>
Источник
trante
15 июля 2014 в 06:22
0

coderhelper.com/questions/24745966/…

Eduard Gamonal
22 июля 2015 в 13:14
12

На веб-сайте начальной загрузки есть статья с 5-строчным решением getbootstrap.com.vn/examples/equal-height-columns

Bryan Willis
12 января 2016 в 02:16
2

Пример на Bootstrap ломает отзывчивость Эдуард. Гибкий диск .row отсутствует flex-wrap: wrap;. Вот пример его работы с отзывчивостью: codepen.io/bootstrapped/details/RrabNe

Sql Surfer
17 января 2018 в 15:39
0

Возможное решение - прозрачное изображение шириной 1 пиксель в других столбцах. Это новое изображение шириной в один пиксель соответствует высоте в пикселях картинки кошки в приведенном выше примере. (Может не работать или быть практичным в вашей ситуации)

Amjad Rehman A
19 июля 2018 в 13:00
0

В Bootstrap 4 мы можем использовать карту для того же

Emobe
30 апреля 2019 в 09:40
0

так же, как вы делаете любой блочный элемент определенной высоты?

Alex
24 октября 2021 в 16:03
0

рабочее решение - codeply.com/p/bCpAPuS0LL

Ответы (34)

avatar
Popnoodles
30 октября 2013 в 23:38
1112

Решение 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
31 октября 2013 в 11:50
8

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

itsjavi
11 февраля 2014 в 11:55
1

Это работает, но возникает проблема, если вам нужно абсолютно позиционировать какой-либо элемент внизу: он скрыт за счет переполнения. Вложенные элементы также не могут определить фактическую видимую высоту без javascript.

Popnoodles
11 февраля 2014 в 19:24
0

@mjolnic хороший момент. Я бы хотел найти лучшее решение. Я бы подумал, что высота 100% и блок отображения могут помочь.

Popnoodles
25 марта 2014 в 00:17
0

у меня он работает в Firefox. Вы можете поделиться своим кодом?

LiquaFoo
5 июня 2014 в 16:46
9

Если вы ориентируетесь конкретно на класс столбца начальной загрузки, вам, вероятно, следует использовать привязку ^ вместо подстановочного знака *. Использование ^ говорит о том, что класс должен начинаться с col-, где, поскольку показанный подстановочный знак будет соответствовать любому классу с col- в любом месте строки, возможно, оказывая нежелательное влияние на стили, где вы, возможно, использовали соглашение col-. (например, материал-кол-еще материал).

Popnoodles
5 июня 2014 в 18:53
0

@LiquaFoo Я согласен, но таков селектор начальной загрузки.

Gediminas
23 июля 2014 в 12:34
1

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

Ray
4 августа 2014 в 09:31
0

@Popnoodles Я могу поделиться своим кодом coderhelper.com/questions/25000554/…

Miguel Stevens
13 августа 2014 в 13:40
0

Это работает, но теперь мой col-xs-12 игнорируется .. Как мне это исправить?

eloone
6 сентября 2014 в 10:54
1

Решение 1 очень элегантное

Kamesh
25 сентября 2014 в 06:28
0

Именно то, что я хочу. Большое спасибо!

Mike Boutin
5 февраля 2015 в 15:29
4

Решение 1 может вызвать проблемы с шириной

Ohad Schneider
6 февраля 2015 в 16:35
7

Хороший ответ, с некоторыми оговорками. Решение 1 отключает поплавок и, следовательно, нарушает адаптивное поведение сетки начальной загрузки. В решении 2 (более подробно описанном в positioniseverything.net/articles/onetruelayout/equalheight) не отображается нижняя граница (поскольку она обрезается где-то в области отступов).

fyr91
8 февраля 2015 в 12:19
0

Здравствуйте, у меня такая же проблема. Но после того, как я попробовал решения, столбец, похоже, не реагирует. Как это исправить?

LedZelkin
8 февраля 2015 в 17:31
0

В моем случае Solution2 реагирует, но не первым, у кого возникла ошибка с bootstrap 3.

ZZY
14 февраля 2015 в 03:56
0

Я обнаружил проблему с решением 2: если есть элементы с attr id="xxx" и пользователи переходят к идентификатору, содержимое над элементом не отображается (демонстрация: вставьте коды в локальный файл HTML, откройте это с "... / xxx.html # p3"). Решение 1 работает нормально, надеюсь, я не найду с ним никаких проблем.

ZZY
16 февраля 2015 в 14:18
1

@Notflip, я столкнулся с той же проблемой, что «col-xs-12» не переводит следующий «столбец» в следующую строку. Мое обходное решение - применить решение 1 только к> = маленькому устройству, так как @media(min-width:768px) { Solution 1 }

zajca
14 мая 2015 в 08:30
5

Ни одно из этих решений не работает. 1) уничтожает ответную сетку bs3, не работающую, поскольку float: none 2) это решение не выполняет столбцы того же размера в отзывчивом режиме, вот демонстрация: bootply.com/SmpoLAKqO1

zajca
14 мая 2015 в 09:08
0

На самом деле есть две вещи, которые вы могли бы захотеть: одна - это просто та же высота столбца без реагирования, поскольку это лучшее решение 2. Другой - избегать прыжков столбца, если текст изменяет высоту одного столбца на другой, поскольку это лучшее решение -> coderhelper.com/a/24747063/1269774. Если вам нужны оба варианта, используйте javascript или flexbox или напишите свою собственную сетку с помощью таблицы.

Zain
27 мая 2015 в 06:18
0

в случае двух столбцов при изменении размера экрана браузера (на mid, sm и т. д.) первые столбцы скрываются ... почему ?? как это исправить

Christine268
4 июня 2015 в 01:38
0

+1 Только для второго решения, потому что оно не нарушает отзывчивость Bootstrap. Любой ответ бесполезен при работе с Bootstrap .

Anish Nair
12 октября 2015 в 06:47
0

Решение ! действительно сработало для меня. Но мне пришлось добавить в поле !important. Как это: margin-bottom: -99999px !important;

SPRBRN
15 октября 2015 в 10:40
18

Решение 3 нарушает отзывчивость строки.

Bryan Willis
20 декабря 2015 в 13:07
2

Все это отличные примеры столбцов одинаковой высоты, хотя в этой ситуации все они нарушают структуру сетки начальной загрузки. Вы никогда не должны делать это явно для классов строк и столбцов. Добавьте свой собственный класс. Первый, хотя и эффективен для гибких макетов, не подходит для адаптивных макетов, поскольку он применяет высоту всех столбцов к высоте .row, даже если они не находятся в той же строке. Во втором отсутствуют стили и не следует использовать столбцы BS в качестве ячеек таблицы. Таблицы предназначены для использования border-spacing, в то время как классы начальной загрузки col- используют отступы для своего интервала. Совместное использование не сработает.

Bryan Willis
20 декабря 2015 в 13:13
11

@Popnoodles, вы должны добавить flex-wrap: wrap; в третий пример, чтобы включить отзывчивость. Вы также захотите добавить display: flex; flex-direction: столбец; в класс столбца. Если вы собираетесь использовать .row, а не настраиваемый класс, вам необходимо предоставить запасной вариант для старых браузеров, изменяющих гибкость дисплея обратно. Вот пример

Farzad Yousefzadeh
10 февраля 2016 в 14:26
0

Отрицательная маржа там супер умная !!

Tacocat
3 марта 2016 в 00:10
2

@BryanWillis Отличный ответ! Решения в этом ответе не сработали для меня. Спасибо!

Damian
4 апреля 2016 в 21:20
0

Я пытался разобрать каждый метод, но ни один из них не работал, вот моя демонстрация: DEMO

Watchmaker
26 апреля 2016 в 16:33
0

@bwillis что именно делает display: flex; flex-direction: column; в классе столбца? Вроде ничего не заметно.

krx
14 мая 2016 в 20:19
0

Новое решение flexbox соответствует всем моим требованиям.

Matthew Lock
18 мая 2016 в 04:41
0

Третье решение близко, но в IE 11 составные блоки div кажутся слишком широкими, а в FF уложенные блоки имеют разную ширину.

johntrepreneur
25 мая 2016 в 23:12
0

Решение 1 скрывает нижнюю границу.

David Qin
15 июня 2016 в 04:14
0

Я предпочитаю решение 2 и добавляю width: 100% для .row

Eugen Konkov
5 июля 2016 в 10:01
0

@LoganG. ^ не работает для этого класса = "test col-md-2"

Popnoodles
3 ноября 2016 в 16:58
0

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

Popnoodles
3 ноября 2016 в 18:56
0

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

Patrick
9 ноября 2016 в 13:33
0

Решение 3: flex-wrap: обрыв упаковки на сафари-мобиле. Я удалил это и у меня работает

Recomer
24 ноября 2016 в 20:18
0

Вы самые лучшие!

Ting Yi Shih
19 января 2017 в 03:28
1

Отрицательная маржа работает лучше всего. Два других решения нарушают свойство responseive (не будет переноситься на маленький экран)

Rudey
30 января 2017 в 15:28
6

Решение 3 не работает в Safari. .row::before { display: block; } исправляет это, но я не знаю почему.

Zim
14 марта 2017 в 23:45
1

table-cell или negative margins действительно не работают, когда дело доходит до адаптивного дизайна

Guilherme Felipe Reis
5 июля 2018 в 11:31
0

Большое вам спасибо, первое решение действительно хорошо работает для меня, но одно из ячеек таблицы не работает в моей среде. БОЛЬШОЕ СПАСИБО!

gedii
1 октября 2019 в 02:15
0

Решение 3 помогло. Спасибо!

avatar
Ramazan
30 января 2021 в 05:36
9

Из официальной документации. Может быть, вы сможете использовать это в вашем случае.

Если вам нужна одинаковая высота, добавьте к карточкам .h-100.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>
Pierre de LESPINAY
26 августа 2021 в 14:28
0

Самый простой ответ (работает с Bootstrap> 4)

avatar
MD Ashik
19 марта 2019 в 17:11
2

19.03.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>

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
  min-height: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<br><br><br>
<div class="d-flex align-content-stretch flex-wrap fixed-height-200">
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight bg-danger">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-info">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-primary">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
</div>
MD Ashik
17 мая 2019 в 19:25
4

Почему вы даете мне отрицательный голос. вы можете оставить комментарий к нему?

avatar
Dagmar
17 января 2019 в 12:11
4

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

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

Мое решение - использовать отступы в div столбца (вместо поля внутреннего элемента). Вот так:

<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 для создания набора из девяти блоков с рамкой

avatar
BuffMcBigHuge
7 ноября 2018 в 20:18
8

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

Простой и понятный пример:

Example of matched column widths in 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/

avatar
kfn
4 апреля 2018 в 15:01
2

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

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

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..
avatar
Pacific P. Regmi
25 ноября 2017 в 08:33
1

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()
});
avatar
Znaneswar
17 ноября 2017 в 06:40
8

Если кто-то использует 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/

Ahmed Abdelfattah
7 августа 2020 в 16:11
0

Я думаю это был бы лучший ответ

avatar
grinmax
6 марта 2017 в 11:16
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/

avatar
Adam Lindqvist
2 марта 2017 в 07:47
15

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

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

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();
}

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

avatar
Tom Kur
25 января 2017 в 13:11
0

Вы можете заключить столбцы в 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>
Ray Hunter
13 марта 2017 в 21:40
0

У меня не заработала кнопка в одной из колонок.

avatar
eaglei22
10 ноября 2016 в 18:21
8
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

От:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

avatar
Ali Akbar Reyad
7 ноября 2016 в 11:56
-4

Вы можете использовать код ниже

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);
avatar
Neal
4 октября 2016 в 18:05
3

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

.align-box {
    min-height: 400px;
}
avatar
Eddy Goh
3 июля 2016 в 08:21
-3

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

Добавьте дополнительный clearfix только для необходимого окна просмотра

<div class="clearfix visible-xs-block"></div>

Например:

<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>

См. http://getbootstrap.com/css/#grid-responsive-resets

avatar
Oleg
19 мая 2016 в 14:43
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; ?>
skerit
25 августа 2016 в 14:00
0

Однако это не делает ваши столбцы одинаковой высоты.

Michal - wereda-net
25 марта 2020 в 11:02
1

Для меня, когда я хочу, чтобы столбцы были одинаковой высоты / места в строке, это решение

avatar
Faiz
25 февраля 2016 в 04:52
5

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

avatar
Ajay Sathish
15 февраля 2016 в 11:16
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>

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

avatar
Bryan Willis
20 декабря 2015 в 12:48
69

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

Screenshot of Codepen

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

.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.

ken2k
7 апреля 2016 в 08:42
12

Это единственный ответ, который действительно сработал для меня. 3 самых популярных ответа - пустая трата времени

Bryan Willis
8 апреля 2016 в 06:46
0

Рад, что кто-то нашел это полезным. Я определенно потратил слишком много времени на создание этого демо! При использовании этого и flexbox в целом следует отметить, что не все браузеры одинаковы. Это довольно новая концепция, и в ней все еще есть некоторые причуды в зависимости от ваших макетов, поэтому просто убедитесь, что вы провели кроссбраузерное тестирование, прежде чем использовать его вживую.

Bryan Willis
8 апреля 2016 в 06:48
0

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

Marcelo
21 апреля 2016 в 02:22
0

@bwillis Пришлось отредактировать пример кладки, чтобы использовать .masonary-row > [class*="col-"] , чтобы не разбивать внутренние столбцы, и добавить точку останова на 992px, чтобы иметь еще один столбец, но помимо этого масонство работает как шарм, слава!

Matthew Lock
18 мая 2016 в 04:46
0

Да, это единственный ответ, который работает и реагирует на запросы. Сделайте это принятым ответом.

KevinH
24 мая 2016 в 12:22
3

Выглядит неплохо, но, к сожалению, не работает в Safari 9.1 на MacOS :-(

Bryan Willis
27 мая 2016 в 15:10
0

Спасибо за внимание @TheSchecke, сегодня проверю и обновлю.

Bryan Willis
27 мая 2016 в 15:56
1

@TheSchecke вот исправление. Насколько мне известно, сейчас это работает во всех браузерах, поддерживающих Flexbox. Пожалуйста, дайте мне знать, если я ошибаюсь. s.codepen.io/bootstrapped/debug/pboJNd. Проблема была связана с row:after, row:before, имеющим набор display: table, который, по-видимому, не нравится Safari.

Matthew Lock
8 июля 2016 в 00:31
2

Просто предупреждаю, что это очень плохо работает в браузере Safari на iPad.

Bryan Willis
8 июля 2016 в 05:09
1

Сожалеем, что @MatthewLock. Я только что протестировал свой IPad Air IOS 8.1 с последним сафари, и он работает на этом. Я также смог протестировать на crossbrowsertesting.com, используя iPad mini retina с Safari 7, и, похоже, он тоже работает нормально. Вот результаты этого теста. Можете ли вы предоставить версию для iPad и Safari, которую вы используете? Я бы хотел попытаться исправить это как можно скорее или, по крайней мере, добавить комментарий в ответ, поскольку я знаю, что многие люди его используют.

Matthew Lock
9 июля 2016 в 01:46
0

Спасибо, Брайан. Я проверю это.

Bryan Willis
11 октября 2017 в 05:49
0

@ Jordan.J.D по какой ссылке? Насколько я могу судить, срок их действия не истек.

YUzhva
17 августа 2018 в 10:20
0

Проблема с Safari исправлена ​​с помощью псевдонимов :: before и :: after!) Большое спасибо, чувак!)

ken2k
22 ноября 2018 в 16:35
0

Вернулся на тот же вопрос более двух лет спустя, не разочарован, я прокомментировал / проголосовал за этот ответ в первый раз, все еще отлично, и проблема устранена в течение нескольких минут!

Jay
21 марта 2019 в 14:34
0

Это да бом! Единственный, который у меня стабильно работал и на iPad Safari (iOS 12).

avatar
Станислав Пономарев
1 декабря 2015 в 02:53
3

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

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

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

avatar
Zachary Weixelbaum
13 сентября 2015 в 19:01
7

В некоторых из предыдущих ответов объясняется, как сделать блоки 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;
}

Если вы хотите использовать sm:

.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;
}
Bryan Willis
20 декабря 2015 в 11:57
0

Вы сделали это намного сложнее, чем нужно :) `Просто используйте flex-wrap: wrap;, тогда вам не нужны все отдельные ... если они вам специально не нужны.

Matthew Lock
8 июля 2016 в 00:33
0

это не работает на iPad Safari

avatar
Chris Moschini
28 июля 2015 в 01:03
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.

avatar
Nelson
16 мая 2015 в 00:35
-6

здесь много css ...

jQuery

$(document).ready(function() {

   // Get height of original column you want to match
   var box-height = $('.panel:nth-child(1)').outerHeight();

   // Output same height on particular element or element(s)
   $('.panel').height(box-height);

});

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

Jsfiddle

cimmanon
7 июля 2015 в 13:30
10

Да, здесь много CSS, потому что вопрос помечен как css, а не javascript. Не публикуйте JS-решения проблем, которые можно решить с помощью чистого CSS. В 99% случаев производительность хуже.

avatar
Chris Staikos
6 мая 2015 в 14:25
1

Если это имеет смысл в вашем контексте, вы можете просто добавить пустой блок из 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 -->

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

Ellisan
24 ноября 2017 в 14:26
0

Это не ответ на заданный им вопрос!

avatar
bloigge
4 мая 2015 в 15:38
4

Лучшие на свете:

Reflex - Документы

Работает с Bootstrap

Обновление:

  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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<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="https://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
4 мая 2015 в 15:57
0

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

avatar
Alexander S.
29 апреля 2015 в 14:34
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;
    }
  }
}

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


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

max
8 декабря 2017 в 16:43
0

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

avatar
Kevin R.
29 апреля 2015 в 10:40
86

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

Chris Moschini
28 июля 2015 в 00:05
5

на основе flexbox. Не работает ни в IE8, ни в 9, ни в Android 2.x caniuse.com/#feat=flexbox

Zim
8 апреля 2016 в 12:50
68

Примечание: getbootstrap.vn не является «Bootstrap». Это сторонний проект.

Cyril Duchon-Doris
1 мая 2016 в 15:50
0

Однако, похоже, это интегрировано в bootstrap v4.

ekkis
5 октября 2016 в 23:30
0

Я включил правильный CSS (с сайта .vn), но он все испортил. это основано на гибкости

Armada
14 февраля 2017 в 09:57
0

Отлично ... ад плагин.

Gediminas
21 февраля 2017 в 16:58
0

Круто, но эта таблица стилей включает дополнительные красные стили и стили с рамкой для классов .col - это не круто :(

nh-labs
4 декабря 2018 в 17:11
0

НЕ работает в Bootstrap 4. этот селектор берется откуда-то еще, но не является частью bootstrap4. У меня сработало решение 3) выше с небольшим изменением гибкости на сетку в селекторе столбцов .row {display: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; дисплей: гибкий; flex-wrap: обертка; } .row> [класс * = 'col-'] {дисплей: сетка; // здесь flex-direction: column; }

Otuoma Sanya
26 июля 2021 в 10:07
0

У меня работает на bootstrap 3

avatar
paulalexandru
26 февраля 2015 в 21:03
32

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

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

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

    $(".panel").height(maxHeight);
});
nidalpres
18 июня 2015 в 15:35
1

Имейте один div class = "row" с переменным количеством панелей, каждая из которых имеет класс "col-md-4", который должен дать мне 3 столбца и неизвестное количество строк, в зависимости от количества элементов, которые я хочу перечислить. Этот JS работал и требует минимальных изменений в моем HTML / CSS, в отличие от различных CSS-штучек, которые я пробовал. Единственное, что я изменил, так это пометить все мои панели столбцов дополнительным классом, например, «same-height-panel», а затем использовать $ («. Same-height-panel») вместо $ («. Panel»).

Dinosaurius
3 февраля 2017 в 21:45
1

Единственное решение, которое сработало для меня после одного дня экспериментов с CSS.

jave.web
25 июля 2017 в 13:07
1

Это хорошее решение, но .ready() не самое подходящее время для его вызова - его следует вызвать по .load()

paulalexandru
25 июля 2017 в 13:38
1

@ jave.web Если вы считаете, что это хорошее решение, пожалуйста, отметьте его большим пальцем. Спасибо

Blackpanther0001
20 февраля 2018 в 22:23
0

Вместо этого используйте window.onload = function() {...function content above...}. Так работает лучше.

Phemelo Khetho
24 февраля 2021 в 08:58
0

+1 Как и многие другие, вышеупомянутое решение кажется более чистым подходом, который не сочетается с файлом css.

avatar
DarkScrolls
30 января 2015 в 10:17
4
.row.container-height {
    overflow: hidden;
}

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

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

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

avatar
Marty
25 августа 2014 в 06:15
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()

Jordon
17 января 2015 в 03:36
0

Это занижено - просто и мало, но при этом можно изменить размер всех столбцов без необходимости иметь фиксированное количество столбцов в строке. Хороший!

Chris
5 февраля 2015 в 11:06
1

Это не работает, потому что вы устанавливаете последнюю самую большую высоту в каждой функции. Если третий столбец является самым высоким столбцом, столбцы 1 и 2 не имеют нужной высоты .. Вы должны установить последнюю строку «$ (this) .css ({'height': h});» после каждой функции. Я сделаю правку.

avatar
Steffan Perry
12 мая 2014 в 19:26
8

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

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

.row.borders{
    display: inline-flex;
    width: 100%;
}
Christine268
4 июня 2015 в 01:29
2

Пока ему удается сделать все содержимое в строке одинаковой высоты; Это нарушает отзывчивость Bootstrap.

avatar
Zim
6 апреля 2014 в 10:25
384

Обновление 2021 года

Бутстрап 4 + 5

Flexbox теперь используется по умолчанию в Bootstrap 4 (и Bootstrap 5), поэтому нет необходимости в дополнительном CSS для создания столбцов одинаковой высоты: https://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>

Bootstrap 3

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

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

Пример гибкого бокса с одинаковой высотой начальной загрузки

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

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

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

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

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

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

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

Zim
17 сентября 2014 в 14:04
5

Вы можете использовать медиа-запрос, чтобы применить flexbox только на больших / широких устройствах. Я обновил загрузочный файл: bootply.com/Cn6fA6LuTq

Justin Lau
28 июня 2015 в 12:30
0

Если кому-то интересно, я создал перо, чтобы продемонстрировать аналогичные эффекты на форме с помощью flexbox.

dandaka
2 марта 2017 в 08:12
0

@ZimSystem Ваш код в Codeply не работает в Safari 10.0.3 / OSX take.ms/bj31b

Zim
2 марта 2017 в 10:56
2

Это известная ошибка Safari с flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730

Zim
29 марта 2017 в 15:35
5

@Stanley, комментарий о том, что "больше не отвечает", устарел и неуместен.

Zim
11 марта 2018 в 11:46
0

И как это? Это работает для меня и еще 194 человека ;-)

Randell
23 июля 2018 в 23:04
0

Каковы возможные причины того, что эти стили не работают в некоторых случаях?

observer
4 января 2019 в 14:43
0

Первые 2 ссылки больше не работают: «Ошибка приложения»

Ryan NZ
11 января 2019 в 05:50
1

Это единственное исправление, которое у меня сработало. Спасибо, Зим, это здорово!

Andrew Reese
8 апреля 2020 в 18:43
0

Это единственное решение, которое сработало для меня, и я пробовал немало. Спасибо за подробный пост!

avatar
JoeTidee
27 марта 2014 в 21:14
0

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

В приведенном ниже примере также представлен 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;
  }
}
avatar
globalSchmidt
19 ноября 2013 в 17:47
43

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

Artur Kędzior
27 октября 2016 в 21:21
1

Единственное решение, которое действительно работает и не нарушает отзывчивость

niico
3 ноября 2016 в 23:26
0

Позволяет ли это указать, что столбцы должны быть квадратными или иметь одинаковую высоту?

globalSchmidt
4 ноября 2016 в 13:46
0

@niico 14 - прошло некоторое время с тех пор, как я использовал это, но в моем приложении требование состоит в том, чтобы элементы в каждой строке были одинаковой высоты, но высота может варьироваться от строки к строке. Поскольку высота зависит от элементов в строке, если высота вашего элемента равна их ширине, они должны быть представлены в виде квадратов.