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

828

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

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

Изображение 104

Вот код:

<link href="/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>
  • 0
    stackoverflow.com/questions/24745966/...
  • 9
    На сайте начальной загрузки есть статья с 5- строчным решением getbootstrap.com.vn/examples/equal-height-columns
Показать ещё 3 комментария

32 ответа

920
Лучший ответ

Решение 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;
}
  • 1
    ВОТ ЭТО ДА. Благодарю. Почему это работает?
  • 7
    Думайте об этом как о колонне, втянутой в негативное пространство. Если вы удалите переполнение, вы увидите, что происходит.
Показать ещё 51 комментарий
236

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

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

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

Пример бутстрапа той же высоты

Чтобы применять один и тот же высотный 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 отображения на более широких экранах до вертикального стека столбцов)


Бутстрап 4

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

  • 31
    Строка больше не реагирует после применения этого.
  • 5
    Вы можете использовать медиа-запрос, чтобы применять flexbox только на более крупных устройствах. Я обновил bootply: bootply.com/Cn6fA6LuTq
Показать ещё 11 комментариев
76

Нет необходимости в 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="/equal-height-columns.css" />

на ваш html

  • 5
    Flexbox основе. Не работает ни в IE8, ни в 9, ни в Android 2.x caniuse.com/#feat=flexbox
  • 8
    Не работает, насколько я вижу. jsbin.com/ravudobovo/edit?html,output
Показать ещё 8 комментариев
56

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

Изображение 2300

Чтобы добавить поддержку для гибкого содержимого эскиза в столбцах 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 самых популярных ответа были пустой тратой времени
  • 0
    Рад, что кто-то нашел это полезным. Я определенно потратил слишком много времени на создание этой демонстрации! При использовании этого и flexbox в целом следует отметить, что не все браузеры созданы одинаковыми. Это довольно новая концепция, и есть некоторые причуды, которые по-прежнему зависят от ваших макетов, поэтому просто убедитесь, что вы проводите кросс-браузерное тестирование, прежде чем использовать его вживую.
Показать ещё 16 комментариев
39

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

  • 1
    Единственное решение, которое действительно работает и не нарушает отзывчивость
  • 0
    Позволяет ли это указать, что столбцы должны быть квадратными или иметь одинаковую высоту?
Показать ещё 1 комментарий
25

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

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

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

    $(".panel").height(maxHeight);
});
  • 1
    Есть один div class = "row" с переменным числом панелей каждого класса "col-md-4", который должен дать мне 3 столбца и неизвестное количество строк, в зависимости от количества элементов, которые я хочу перечислить. Этот JS работал и требует минимальных изменений в моем HTML / CSS, в отличие от различных вещей CSS, которые я пробовал. Единственное, что я изменил, - это пометил все мои панели столбцов дополнительным классом, то есть «панель одинаковой высоты», а затем использовал $ («. Same-height-panel») вместо $ («. Panel»)
  • 1
    Единственное решение, которое сработало для меня после одного дня экспериментов с CSS.
Показать ещё 3 комментария
8
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

From:

/equal-height-columns.css

  • 1
    лучший способ, который видели до сих пор.
7

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

<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;
}
  • 0
    Вы сделали это намного сложнее, чем нужно :) `Просто используйте flex-wrap: wrap; тогда вам не нужны все отдельные ... если вы специально не хотите их.
  • 0
    это не удается на iPad Safari
7

cheeky jquery solution, если кому-то интересно. Просто убедитесь, что у всех ваших 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()

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

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

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

.row.borders{
    display: inline-flex;
    width: 100%;
}
  • 1
    В то время как ему удается сделать все содержимое строки одинаковой высоты; Это нарушает отзывчивость Bootstrap.
5

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

Поэтому я экспериментировал довольно давно и придумал это. Полное решение для столбцов "Бутстрап Равная высота" с помощью 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();
}

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

5

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

  • 0
    Супер просто, и это сработало для моего случая.
4

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

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

Изображение 2301

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/

3

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

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

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

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

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

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

см. https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 для хорошей демонстрации, а с помощью resposne вы хотите в нижней части, со ссылкой.

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

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

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

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

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

  <link href="/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/

  • 0
    Должны быть приняты.
2

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

.align-box {
    min-height: 400px;
}
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

Лучше всего там:

Github reflex - Docs

Работает с бутстрапом

Update:

  • Включить CSS
  • Обновите свой код:

/*!
 *
 * 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: [email protected]
 * 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="/bootstrap.min.css" rel="stylesheet"/>
<link href="/bootstrap.min.css" rel="stylesheet"/>

<script src="/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>
  • 0
    Добро пожаловать в стек переполнения! Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными в случае изменения связанной страницы. Посмотрите, как мне написать хороший ответ .
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 *.

1

Я использую это супер простое решение с 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; ?>
  • 0
    Это не делает ваши столбцы все одинаковой высоты, хотя.
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. Я привязал их к divs для небольшой производительности в моем ограниченном использовании, но вы можете удалить тег, чтобы сделать его более обобщенным, как и остальные Bootstrap.

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

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

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

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

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

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

Мое решение состоит в том, чтобы использовать padding для col 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 для создания набора из девяти блоков с рамкой

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

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>
  • 0
    У меня не работала кнопка с одним из столбцов.
0

Думаю, я просто добавлю, что ответ, предоставленный Dr.Flink, также может быть применен к блоку 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;
  }
}
-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

-5

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

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);
-7

alot 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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню