Bootstrap kullanıyorum. Üç sütunu aynı yükseklikte nasıl yapabilirim?

İşte sorunun ekran görüntüsü. Mavi ve kırmızı sütunların sarı sütunla aynı yükseklikte olmasını istiyorum.

İşte kod:

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

Bootstrap 4 kullanarak çözüm 4

Bootstrap 4, Flexbox kullanır, bu nedenle fazladan CSS gerekmez.

gösteri

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

Negatif kenar boşlukları kullanan Çözüm 1 (yanıt verme hızını azaltmaz)

gösteri

.row{
    overflow: hidden; 
}

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

Tablo 2'yi kullanarak çözüm 2

gösteri

.row {
    display: table;
}

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

Flex kullanarak Solution 3 eklenmiştir Ağustos 2015. Bundan önce yayınlanan yorumlar bu çözüm için geçerli değildir.

gösteri

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

2020 Güncellemesi

Bootstap 3.x için en iyi yaklaşım - CSS flexbox kullanarak (ve minimum CSS gerektirir).

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

Bootstrap aynı yükseklik flexbox örneği

Aynı yükseklik esnek kutusunu yalnızca belirli kesme noktalarına (duyarlı) uygulamak için bir medya sorgusu kullanın. Örneğin, işte sm(768 piksel) ve üstü:

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

Bu çözüm aynı zamanda birden çok satır için de iyi sonuç verir (sütun kaydırma):
https://www.bootply.com/gCEXzPMehZ

Diğer geçici çözümler

Bu seçenekler başkaları tarafından önerilecektir, ancak duyarlı tasarım için iyi bir fikir değildir . Bunlar yalnızca sütun kaydırmasız basit tek sıralı düzenler için çalışır.

1) Büyük negatif kenar boşlukları ve dolgu kullanımı

2) display: table-cell (bu çözüm aynı zamanda duyarlı ızgarayı da etkiler, bu nedenle @media sorgusu table, sütunlar dikey olarak yığınlanmadan önce yalnızca daha geniş ekranlara görüntü uygulamak için kullanılabilir )

Bootstrap 4

Flexbox artık Bootstrap 4'te varsayılan olarak kullanılıyor, bu nedenle eşit yükseklik sütunları yapmak için ekstra CSS'ye gerek yok: http://www.codeply.com/go/IJYRI4LPwU

Misal:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

JavaScript gerekmez. Sınıfı .row-eq-heightşu şekilde mevcut olanınıza ekleyin .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>

İpucu: Satırınızda 12'den fazla sütun varsa, önyükleme ızgarası onu sarmaz. Yani div.row.row-eq-heighther 12 sütuna bir yenisini ekleyin .

İpucu: eklemeniz gerekebilir

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

html'nize

Sorunuzu cevaplamak için ön ekli css ile tam duyarlı demoyu görmeniz yeterli :

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

Yukarıdaki ekran görüntüsü gibi esnek sütunların içine esnek küçük resim içeriği desteği eklemek için de bunu ekleyin ... Not Bunu panellerle de yapabilirsiniz:

.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 ve altında çalışmazken, bir çoklu dolgu olarak javascript ızgaraları gibi bir şeye sahip koşullu etiketleri kullanarak demoyu bir yedekle kullanabilirsiniz:

<!--[if lte IE 9]>

<![endif]-->

Kabul edilen cevabın diğer iki örneğine gelince ... Tablo demosu iyi bir fikir ama yanlış uygulanıyor. CSS'nin bootstrap sütun sınıflarına uygulanması, şüphesiz ızgara çerçevesini tamamen kıracaktır. Bir ve iki için özel bir seçici kullanmanız gerekir. Tablo stilleri [class*='col-'], tanımlanan genişliklere uygulanmamalıdır. Bu yöntem SADECE eşit yükseklik VE eşit genişlik sütunları istiyorsanız kullanılmalıdır. Diğer düzenler için değildir ve duyarlı DEĞİLDİR. Ancak mobil ekranlarda geri dönüş yapabiliriz ...

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

Son olarak, kabul edilen cevaptaki tek bir gerçek düzenin bir sürümünü uygulayan ilk demo, bazı durumlar için iyi bir seçimdir, ancak önyükleme sütunları için uygun değildir. Bunun nedeni, tüm sütunların kap yüksekliğine genişlemesidir. Bu nedenle, sütunlar yanlarındaki öğelere değil, tüm kapsayıcıya genişlediğinden, bu da yanıt verebilirliği kıracaktır. Bu yöntem, artık satırlara alt kenar boşlukları uygulamanıza izin vermeyecek ve ayrıca bağlantı etiketlerine kaydırma gibi diğer sorunlara da neden olacaktır.

Kodun tamamı için, flexbox kodunun önüne otomatik olarak kod ekleyen Codepen'e bakın.

Yalnızca bir satır gösterirsiniz, böylece kullanım durumunuz bununla sınırlı olabilir. Birden fazla satırınız olması durumunda, bu eklenti - github Javascript-grids - mükemmel çalışır! Her panelin en yüksek panele genişlemesini sağlayarak, her satıra o satırdaki en yüksek panele göre potansiyel olarak farklı bir yükseklik verir. Bu css vs css bir çözüm, ama alternatif bir yaklaşım olarak tavsiye etmek istedim.

Bunun herhangi bir tarayıcıda çalışmasını istiyorsanız javascript kullanın:

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

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

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

Bu konu ve diğer sayfalarda yapılan önerileri bir sürü denedim ama hiçbir çözüm% 100 her tarayıcıda çalıştı.

Bu yüzden biraz zaman denedim ve bununla geldim. Sadece 1 sınıflı flexbox yardımıyla Bootstrap Eşit Yükseklik sütunları için eksiksiz bir çözüm . Bu, IE10 + 'nın tüm büyük tarayıcılarında çalışır.

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'nin daha da fazla sürümünü desteklemek için, örneğin, https://github.com/liabru/jquery-match-height öğesini kullanabilir ve tüm alt sütunlarını hedefleyebilirsiniz .equal-cols. Bunun gibi:

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

Bu çoklu dolgu olmadan, sütunlar her zamanki Bootstrap sütunları gibi davranacak ve bu da oldukça iyi bir geri dönüş olacaktır.

Inline-flex'i de kullanabilirsiniz, bu da oldukça iyi çalışır ve her satır öğesini CSS ile değiştirmekten biraz daha temiz olabilir.

Projem için alt öğeleri olan her satırın kenarlarının aynı yükseklikte olmasını istedim, böylece kenarlar pürüzlü görünüyordu. Bunun için basit bir css sınıfı oluşturdum.

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

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

Gönderen:

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

ilgilenen varsa arsız jquery çözüm. Tüm coll'lerinizin (el) ortak bir sınıf adına sahip olduğundan emin olun ... $ (window) 'a bağlarsanız da iyi çalışır.

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

kullanım

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

Not: Bu yazı, kodun yalnızca $.each()işlevdeki son en yüksek yüksekliğe ayarlandığını belirten @Chris'in yorumuna göre düzenlendi

Önceki cevaplardan bazıları div'lerin nasıl aynı yükseklikte yapılacağını açıklar, ancak sorun şu ki, genişlik çok dar olduğunda div'ler istiflenmeyecektir, bu nedenle cevaplarını bir ekstra parça ile uygulayabilirsiniz. Her biri için kullandığınız satır sınıfına ek olarak burada verilen CSS adını da kullanabilirsiniz, bu nedenle div'lerin her zaman yan yana olmasını istiyorsanız div şöyle görünmelidir:

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

Tüm ekranlar için:

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

Sm kullanmak istediğinizde:

.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 istediğiniz zaman:

.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'yi kullanmak istediğinizde:

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

DÜZENLEME Bir yoruma dayanarak, gerçekten daha basit bir çözüm vardır, ancak xs'ye kadar olan tüm boyutlar için istenen en geniş genişlikten sütun bilgisi verdiğinizden emin olmanız gerekir (ör . <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;
}

2018'in sonlarında burada değerli bir çözüm bulamadığım için şaşırdım. Devam ettim ve flexbox kullanarak bir Bootstrap 3 çözümü buldum.

Temiz ve basit bir örnek:

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

Çalışma demosunu görüntüle: http://jsfiddle.net/5kmtfrny/

Çok geç kaldığımı biliyorum ama şimdi amacınıza ulaşmak için "min-height" stil özelliğini kullanabilirsiniz.

Bootstrap 4 kullanan ve eşit yükseklik sütunları arayan herkes yalnızca row-eq-heightdiv div öğesini kullanın

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

İşte benim çözüm (derlenmiş 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;
  }
}

Kodunuz şöyle görünecektir:

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

Temelde bu, sınıfın kendi içinde sınıfları .col-*uygulamanız gereken farklılığa sahip sınıflarla kullandığınız sistemdir .row-*.

İle .row-sm-eqsütun XS ekranlarında dizilir. Herhangi bir ekranda istiflenmelerine ihtiyacınız yoksa kullanabilirsiniz .row-xs-eq.

Aslında kullandığımız SASS sürümü:

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

Canlı demo

Not: karıştırma .col-xs-12ve .col-xs-6tek bir satırın içinde düzgün çalışmaz.

Çözüm 1'i yalnızca satırlardaki sütuna uygularken bir sorun var. Çözüm 1'i geliştirmek istiyorum.

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

(Üzgünüm, Popnoodles'ın anwer'ı hakkında yorum yapamazsın. Yeteri kadar itibarım yok)

En iyisi orada:

Github refleksi - Dokümanlar

Bootstrap ile çalışır

Güncelleme:

1. CSS'yi dahil et
2. Kodunuzu güncelleyin:

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

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

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

İşte benim yöntem, medya sorgusunda bazı değişikliklerle flex kullandık.

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

daha sonra gerekli olan ebeveynlere sınıflar ekledi.

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

Duyarlı kesme noktaları kullanıyorum çünkü akı genellikle bootstrap standart duyarlı doğasını engelliyor.

clearfixHerhangi bir yan etkisi olmayan bu süper kolay çözümü kullanıyorum .

AngularJS ile ilgili bir örnek:

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

Ve PHP üzerinde bir örnek daha:

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

Hızlı, kolay bir çözüm arayanlar için - div'de en büyük bloktan biraz daha büyük bir min yüksekliği ayarlayan nispeten tutarlı bir blok içeriği kümeniz varsa uygulamak daha kolay olabilir.

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

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

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

Burada .container-height, tüm .col * alt öğelerinin aynı yüksekliğe sahip olduğu .row biçimli öğeye eklenmesi gereken stil sınıfıdır.

Bu stilleri yalnızca belirli bir .row (örnekte olduğu gibi .container-height ile) uygulamak da kenar boşluğu ve dolgu taşmasını tüm .col * öğelerine uygulamaktan kaçınır.

Aynı soruna bir çözüm aradım ve bir işe yaradı! - neredeyse hiçbir ekstra kod olmadan ..

bkz https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 iyi disuccuion için ve Response ile bir bağlantı ile, alt istiyorum.

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

bu benim için doğru yanıt yoluydu ... bir teklif: ... 3 - flexbox kullanın (en iyisi!)

2017 itibariyle, duyarlı bir tasarımda eşit yükseklik sütunları oluşturmanın en iyi (ve en kolay) yolu CSS3 flexbox kullanmaktır.

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

ve sadece şunu kullanın:

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

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

Misal:

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

Burada birkaç cevaptan uyarlanmıştır. Flex8 tabanlı yanıtlar IE8 ve 9 öldükten sonra doğru yoldur ve Android 2.x öldüğünde, ancak 2015'te bu doğru değildir ve muhtemelen 2016'da olmayacaktır. IE8 ve 9 hala 4- Nasıl ölçtüğünüze bağlı olarak kullanımın% 6'sı ve birçok kurumsal kullanıcı için çok daha kötü. http://caniuse.com/#feat=flexbox

display: table, display: table-cellHile daha geriye dönük uyumluluk taşır - ve bir çok şey sadece ciddi uyumluluk sorunu bu güçler Safari konudur olduğunu box-sizing: border-box, bir şey zaten Bootstrap etiketleri başvurmuştur. http://caniuse.com/#feat=css-table

Açıkçası benzer şeyler yapan daha fazla sınıf ekleyebilirsiniz .equal-height-md. Kısıtlı kullanımımdaki küçük performans avantajı için bunları div'lara bağladım, ancak Bootstrap'ın geri kalanı gibi daha genel hale getirmek için etiketi kaldırabilirsiniz.

Buradaki jsfiddle'ın CSS kullandığını ve bu nedenle Less'in başka türlü sağlayacağı şeyler bağlantılı örnekte sabit olarak kodlandığını unutmayın. Örneğin @ screen-sm-min, Less'in ekleyeceği şeyle değiştirildi - 768 piksel.

Bağlamınızda mantıklıysa, her moladan sonra satırınızdaki en uzun hücrenin altına sarılan bir bölücü görevi gören boş bir 12 sütunlu div ekleyebilirsiniz.

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

Bu yardımcı olur umarım!

Sadece Dr.Flink tarafından verilen cevabın bir Bootstrap 3 form-horizontalbloğuna da uygulanabileceğini ekledim - her hücre için arka plan renkleri kullanmak istiyorsanız çok kullanışlı olabilir. Bunun önyükleme formları için çalışması için, sadece tablo benzeri bir yapıyı çoğaltmaya yarayan form içeriğini sarmanız gerekir.

Aşağıdaki örnek, ek bir ortam sorgusu gösteren CSS'yi, Bootstrap 3'ün basitçe ele geçirmesini ve daha küçük ekranlarda normal bir şey yapmasını sağlar. Bu IE8 + 'da da çalışır.

Misal:

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

Bunu flex-box ile yapmayı deneyin

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

Canlı JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

Öyleyse evet, Bootstrap 4 bir satırdaki tüm sütunları eşit yükseklikte yapar, ancak satır içindeki içeriğin etrafında bir kenarlık oluşturursanız, sütunların eşit yükseklikte görünmediğini görebilirsiniz!

height: 100%Sütun içindeki elemana uyguladığımda marjımı kaybettiğimi fark ettim.

Benim çözümüm col 'div (iç elemanda bir kenar boşluğu yerine) dolgu kullanmaktır. Şöyle ki:

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

Yukarıdaki kod örneği, kenarlıklı dokuz kutudan oluşan bir grup oluşturmak için Bootstrap 4.1'i kullanır

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

2019/03/19

** Bootstrap 4 Eşit Yükseklik Çözümü **

Eşit yükseklik için Bootstrap Utilities / flex

Codepen'de canlı örnek

Üst div sabit heightveya önyükleme sınıfına göre eşit yükseklik veyamin-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>