Aktualizacja 2018

Najlepsze podejście do Bootstap 3.x -- using CSS flexbox (and requires minimum CSS)..

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

Bootstrap ta sama wysokość flexbox przykład

Aby zastosować pole flexbox o tej samej wysokości tylko w określonych punktach przerwania (responsive), użyj zapytania o media. Na przykład, oto sm (768px) i w górę:

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

To rozwiązanie działa również dobrze dla wielu wierszy (kolumna owijanie):
https://www.bootply.com/gCEXzPMehZ

Inne obejścia

Te opcje będą zalecane przez innych, ale to nie jest dobry pomysł. do responsywnego projektowania. Działają one tylko dla prostych układów jednorzędowych bez owijania kolumn.

1) za pomocą ogromne ujemne marginesy i wyściółki

2) za pomocą display: table-cell (To rozwiązanie wpływa również na responsywną siatkę, więc @ media zapytanie może być użyte tylko do zastosowania wyświetlacza table na szerszych ekranach, zanim kolumny ustawią się pionowo)

Bootstrap 4

Flexbox jest teraz domyślnie używany w Bootstrap 4, więc nie ma potrzeby, aby dodatkowy CSS robił kolumny o równej wysokości: http://www.codeply.com/go/IJYRI4LPwU

Nie wymaga JavaScript. Wystarczy dodać klasę .row-eq-height do istniejącego .row w ten sposób:

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

Wskazówka: Jeśli masz więcej niż 12 kolumn w wierszu, siatka bootstrap nie zawiąże go. Więc dodaj nową div.row.row-eq-height co 12 kolumn.

Wskazówka: może być konieczne dodanie

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

Do twojego html

Aby odpowiedzieć na twoje pytanie, to wszystko, czego potrzebujesz Zobacz pełne responsywne demo z prefiksem 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;
    }
}

Aby dodać obsługę zawartości miniatur flex w kolumnach flex, takich jak powyższy zrzut ekranu, również dodaj to... Uwaga możesz to zrobić również z panelami:

.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%;
}

Podczas gdy flexbox nie działa w IE9 i poniżej możesz użyć demo z fallback używając tagów warunkowych z czymś takim jak javascript siatki jako polifill:

<!--[if lte IE 9]>

<![endif]-->

Co do pozostałych dwóch przykładów w zaakceptowanej odpowiedzi... Demo tabeli jest przyzwoity pomysł, ale jest realizowane źle. Zastosowanie tego CSS na klasach kolumn bootstrap bez wątpienia całkowicie złamie strukturę siatki. Style tabel nie powinny być stosowane do [class*='col-'], które mają zdefiniowane szerokości. Ta metoda powinna być stosowana tylko wtedy, gdy chcesz mieć kolumny o równej wysokości i równej szerokości. On nie jest przeznaczony do innych układów i nie reaguje. Możemy zrobić to awaryjne jednak na wyświetlaczach mobilnych...

<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%;
    }
}

Wreszcie, pierwsze demo w zaakceptowanej odpowiedzi, które implementuje wersję one true layout jest dobrym wyborem w niektórych sytuacjach, ale nie nadaje się do kolumn bootstrap. Powodem tego jest to, że wszystkie kolumny rozszerzają się do wysokości kontenera. Spowoduje to również przerwanie reakcji, ponieważ kolumny nie rozszerzają się na elementy obok oni, ale cały pojemnik. Ta metoda nie pozwoli również na stosowanie dolnych marginesów do wierszy dłużej, a także spowoduje inne problemy po drodze, takie jak przewijanie do znaczników zakotwiczenia.

Pełny kod znajduje się w Codepen, który automatycznie prefiksuje kod flexbox.

Pokazujesz tylko jeden wiersz, więc twój przypadek użycia może być ograniczony tylko do tego. Na wypadek, gdybyś miał kilka wierszy, ta wtyczka - github Javascript-grids - działa idealnie! Powoduje to, że każdy panel rozszerza się do najwyższego panelu, nadając każdemu rzędowi potencjalnie inną wysokość w zależności od najwyższego panelu w tym rzędzie. Jest to rozwiązanie jquery vs. css, ale chciał polecić go jako alternatywne podejście.

Jeśli chcesz, aby to działało w dowolnej przeglądarce, użyj javascript:

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

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

    $(".panel").height(maxHeight);
});

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

From:

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

Możesz również użyć inline-flex, który działa całkiem dobrze i może być trochę czystszy niż modyfikowanie każdego elementu wiersza za pomocą CSS.

Do mojego projektu chciałem, aby każdy rząd elementów potomnych miał granice tej samej wysokości, aby granice wyglądały postrzępione. W tym celu stworzyłem prostą klasę css.

.row.borders{
    display: inline-flex;
    width: 100%;
}

Bezczelne rozwiązanie jquery jeśli ktoś jest zainteresowany. Upewnij się tylko, że wszystkie Twoje cols (el) mają wspólną nazwę klasy...działa responsively zbyt jeśli powiązać go z $(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});
    });
}

Użycie

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

Uwaga: Ten post został edytowany zgodnie z komentarzem @ Chris, że kod został ustawiony tylko jako ostatnia najwyższa wysokość w funkcji $.each()

Niektóre z poprzednich odpowiedzi wyjaśniają, jak sprawić, by divy były tej samej wysokości, ale problem polega na tym, że gdy szerokość jest zbyt wąska, divy nie będą się układać, dlatego możesz zaimplementować ich odpowiedzi z jedną dodatkową częścią. Dla każdej z nich możesz użyć nazwy CSS podanej tutaj, oprócz klasy row, której używasz, więc div powinien wyglądać tak, jeśli zawsze chcesz, aby div były obok siebie:

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

Dla wszystkich ekranów:

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

Gdy chcesz użyć 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;
    }
}

Gdy chcesz 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;
    }
}

Gdy chcesz używać 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;
    }
}

EDIT Bazując na komentarzu, istnieje rzeczywiście prostsze rozwiązanie, ale musisz upewnić się, że podasz informacje o kolumnie od największej pożądanej szerokości dla wszystkich rozmiarów aż do xs (np. <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;
}

Wiem, że jestem bardzo późno, ale teraz możesz użyć atrybutu stylu "min-height", aby osiągnąć swój cel.

Próbowałem wiele sugestii zawartych w tym wątku i na innych stronach, ale żadne rozwiązanie nie działało w 100% w każdej przeglądarce.

Więc eksperymentowałem trochę czasu i wymyśliłem to. kompletne rozwiązanie dla kolumn Bootstrap o równej wysokości za pomocą flexbox z tylko 1 klasą. działa to we wszystkich głównych przeglądarkach 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>

Aby Obsługiwać jeszcze więcej wersji IE można, Dla przykład, użyj https://github.com/liabru/jquery-match-height i kierować wszystkie kolumny potomne .equal-cols. Tak:

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

Bez tego polyfill kolumny będą zachowywać się jak zwykłe kolumny Bootstrap, co jest całkiem dobrym rozwiązaniem.

Oto moje rozwiązanie (skompilowany 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;
  }
}

Więc Twój kod będzie wyglądał następująco:

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

Zasadniczo jest to ten sam system, którego używasz z klasami .col-* z tą różnicą, że musisz zastosować klasy .row-* do samego wiersza.

Z .row-sm-eq kolumny będą ułożone na ekranach XS. Jeśli nie potrzebujesz ich układać na żadnych ekranach, możesz użyć .row-xs-eq.

Wersja SASS, której faktycznie używamy:

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

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

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

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

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

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

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

Live demo

Uwaga: mieszanie .col-xs-12 i .col-xs-6 wewnątrz jednego wiersza nie będzie działać poprawnie.

Występuje problem z używaniem rozwiązania 1 podczas aplikacji tylko na kolumnie w wierszach. Chciałbym ulepszyć rozwiązanie 1.

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

(Sorry, can 't comment popnoodles' s anwer. Mam za mało reputacji)

Najlepsze tam:

Github reflex-Docs

Działa z bootstrap

Update:

1. Include the CSS
2. Zaktualizuj swój kod:

/*!
 *
 * 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

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

Oto moja metoda, użyłem flex z pewnymi zmianami w zapytaniu o media.

  @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;
  }
}

Następnie dodano klasy do rodzica, które były wymagane.

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

Używam responsywnych punktów przerwania, ponieważ flux zwykle utrudnia standardową responsywność Bootstrap.

Dla tych, którzy szukają szybkiego, łatwego rozwiązania - jeśli masz stosunkowo spójny zestaw zawartości bloku ustawienie minimalnej wysokości na div, która jest nieco większa niż największy blok, może być łatwiejsze do wdrożenia.

.align-box {
    min-height: 400px;
}

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

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

Gdziecontainer-height jest klasą stylu, która musi zostać dodana do a .wiersz stylizowany element, do którego wszystkie jego .col * dzieci mają ten sam wzrost.

Stosowanie tych stylów tylko do niektórych specyficznych .rząd (z .wysokość kontenera, jak w przykładzie) pozwala również uniknąć nakładania marginesu i wypełnienia na wszystkie .col*.

Jeśli ktoś używa Bootstrap 4 i szuka kolumn o równej wysokości, wystarczy użyć row-eq-height do rodzica 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>

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

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

Przykład:

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

Zaadaptowane z kilku odpowiedzi tutaj. Odpowiedzi oparte na flexboxie są właściwe, gdy IE8 i 9 są martwe, a raz Android 2.x nie żyje, ale to nieprawda w 2015 roku i prawdopodobnie nie będzie w 2016 roku. IE8 i 9 nadal stanowią 4-6% użytkowania w zależności od sposobu pomiaru, a dla wielu użytkowników korporacyjnych jest to znacznie gorsze. http://caniuse.com/#feat=flexbox

The display: table, display: table-cell trick is bardziej kompatybilna wstecz - i jedną wielką rzeczą jest to, że jedynym poważnym problemem jest kompatybilność z Safari, gdzie wymusza box-sizing: border-box, coś już zastosowanego do tagów Bootstrap. http://caniuse.com/#feat=css-table

Możesz oczywiście dodać więcej klas, które robią podobne rzeczy, jak .equal-height-md. Przywiązałem je do div dla małej wydajności w moim ograniczonym użyciu, ale możesz usunąć tag, aby uczynić go bardziej uogólnionym, jak reszta Bootstrap.

Zauważ, że jsfiddle używa tutaj CSS, a więc rzeczy, które w przeciwnym razie byłyby mniej, są zakodowane na twardo w linkowanym przykładzie. Na przykład @ screen-sm-min został zastąpiony tym, co mniej wstawiłoby-768px.

Jeśli ma to sens w Twoim kontekście, możesz po prostu dodać pusty 12-kolumnowy div po każdej przerwie, który działa jak dzielnik, który obejmuje dno najwyższej komórki w wierszu.

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

Używam tego super łatwego rozwiązania z clearfix, które nie ma żadnych skutków ubocznych.

Oto przykład na 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>

I jeszcze jeden przykład na 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; ?>

Szukałem rozwiązania tego samego problemu, i znalazłem jeden po prostu działa !! - prawie bez dodatkowego kodu..

Zobacz https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 dla dobrego disuccuion, i z resposne chcesz na dole, z linkiem.

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

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

I po prostu użyj:

div class="container">
   <div class="row display-flex .... etc..

Pomyślałem, że dodam tylko, że Odpowiedź udzielona przez Dr. Flink może być również zastosowana do bloku Bootstrap 3 form-horizontal - co może być bardzo przydatne, jeśli chcesz użyć kolorów tła dla każdej komórki. Aby to zadziałało w formularzach bootstrap, musisz zawinąć zawartość formularza, która służy tylko do replikowania struktury podobnej do tabeli.

Poniższy przykład zawiera również CSS, który demonstruje dodatkowe Zapytanie o media pozwala Bootstrap 3 po prostu przejąć i zrobić to normalne na mniejszy ekran(y). Działa to również w IE8+ .

Przykład:

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

Możesz zawinąć kolumny wewnątrz 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>

Spróbuj to zrobić przez 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/

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

Po prostu przeglądając dokumentację bootstrap i znalazłem proste rozwiązanie problemu z kolumną o tej samej wysokości.

Dodaj dodatkowy clearfix tylko dla wymaganego viewportu

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

Na przykład:

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

Proszę odnieść się do http://getbootstrap.com/css/#grid-responsive-resets

Możesz użyć poniższego kodu

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

Dużo css tutaj...

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

});

Naprawdę prosty kod nie trzeba bawić się css, chociaż wszystkie powyższe opcje są doskonale użyteczne.

Jsfiddle