Saya menggunakan Bootstrap. Bagaimana saya bisa membuat tiga kolom sama tingginya?

Ini adalah screenshot dari masalahnya. Saya ingin kolom biru dan merah sama tingginya dengan kolom kuning.

Ini kodenya:

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

Solusi 4 menggunakan Bootstrap 4

Bootstrap 4 menggunakan Flexbox sehingga tidak perlu untuk CSS tambahan.

Demo

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

Solusi 1 menggunakan margin negatif (tidak merusak responsif)

Demo

.row{
    overflow: hidden; 
}

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

Solusi 2 menggunakan tabel

Demo

.row {
    display: table;
}

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

Solusi 3 menggunakan flex ditambahkan Agustus 2015. Komentar yang diposting sebelum ini tidak berlaku untuk solusi ini.

Demo

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

Perbarui 2020

Pendekatan terbaik untuk Bootstap 3.x - menggunakan CSS flexbox (dan membutuhkan CSS minimal) ..

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

Bootstrap sama dengan tinggi flexbox

Untuk hanya menerapkan flexbox ketinggian yang sama di breakpoints spesifik (responsif), gunakan kueri media. Misalnya, di sini sm(768px) dan lebih tinggi:

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

Solusi ini juga berfungsi dengan baik untuk beberapa baris (pembungkus kolom):
https://www.bootply.com/gCEXzPMehZ

Penanganan lainnya

Opsi-opsi ini akan direkomendasikan oleh orang lain, tetapi bukan ide yang baik untuk desain responsif. Ini hanya berfungsi untuk tata letak baris tunggal tanpa pembungkus kolom.

1) Menggunakan margin negatif besar & padding

2) Menggunakan display: table-cell (solusi ini juga memengaruhi grid responsif, sehingga permintaan @media dapat digunakan untuk hanya menerapkan tabletampilan pada layar yang lebih luas sebelum kolom menumpuk secara vertikal)

Bootstrap 4

Flexbox sekarang digunakan secara default di Bootstrap 4 sehingga tidak perlu CSS tambahan untuk membuat kolom dengan tinggi yang sama: http://www.codeply.com/go/IJYRI4LPwU

Contoh:

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

Tidak perlu JavaScript. Cukup tambahkan kelas .row-eq-heightke yang sudah ada .rowseperti ini:

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

Kiat: jika Anda memiliki lebih dari 12 kolom di baris Anda, kisi bootstrap akan gagal membungkusnya. Jadi tambahkan yang barudiv.row.row-eq-height setiap 12 kolom baru.

Kiat: Anda mungkin perlu menambahkan

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

ke html Anda

Untuk menjawab pertanyaan Anda, inilah yang perlu Anda lihat demo responsif penuh dengan prefiks 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;
    }
}

Untuk menambahkan dukungan untuk flex konten thumbnail dalam kolom flex seperti screenshot di atas juga tambahkan ini ... Catatan Anda juga dapat melakukan ini dengan panel:

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

Sementara flexbox tidak berfungsi di IE9 dan di bawah ini Anda dapat menggunakan demo dengan mundur menggunakan tag kondisional dengan sesuatu seperti javascript kisi sebagai polyfill:

<!--[if lte IE 9]>

<![endif]-->

Adapun dua contoh lainnya dalam jawaban yang diterima ... Tabel demo adalah ide yang layak tetapi sedang dilaksanakan salah. Menerapkan CSS pada kelas-kelas kolom bootstrap secara khusus tanpa ragu akan memecah kerangka kerja grid sepenuhnya. Anda harus menggunakan pemilih khusus untuk satu dan dua gaya tabel tidak boleh diterapkan pada [class*='col-']lebar yang telah ditentukan. Metode ini HANYA harus digunakan jika Anda menginginkan tinggi yang sama DAN kolom dengan lebar yang sama. Ini tidak dimaksudkan untuk tata letak lain dan TIDAK responsif. Namun kami dapat membuatnya mundur pada tampilan seluler ...

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

Terakhir, demo pertama dalam jawaban yang diterima yang mengimplementasikan versi satu tata letak yang benar adalah pilihan yang baik untuk beberapa situasi, tetapi tidak cocok untuk kolom bootstrap. Alasan untuk ini adalah bahwa semua kolom meluas ke ketinggian wadah. Jadi ini juga akan memecah respons karena kolom tidak meluas ke elemen di sebelahnya, tetapi seluruh wadah. Metode ini juga tidak akan memungkinkan Anda untuk menerapkan margin bawah ke baris lebih lama dan juga akan menyebabkan masalah lain seperti menggulir ke tag jangkar.

Untuk kode lengkap, lihat Codepen yang secara otomatis mengawali kode flexbox.

Anda hanya menampilkan satu baris sehingga use case Anda mungkin terbatas hanya untuk itu. Jika Anda memiliki beberapa baris, plugin ini - github Javascript-grids - berfungsi dengan sempurna! Itu membuat setiap panel meluas ke panel tertinggi, memberikan setiap baris berpotensi ketinggian berbeda berdasarkan panel tertinggi di baris itu. Ini adalah solusi jquery vs css, tetapi ingin merekomendasikannya sebagai pendekatan alternatif.

Jika Anda ingin membuat ini berfungsi di browser apa pun, gunakan javascript:

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

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

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

Saya mencoba banyak saran yang dibuat di utas ini dan di halaman lain tetapi tidak ada solusi yang bekerja 100% di setiap browser.

Jadi saya bereksperimen cukup lama dan menghasilkan ini. Solusi lengkap untuk kolom Bootstrap Equal Height dengan bantuan flexbox dengan hanya 1 kelas. Ini berfungsi di semua browser utama 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>

Untuk mendukung lebih banyak versi IE, Anda dapat, misalnya, menggunakan https://github.com/liabru/jquery-match-height dan menargetkan semua kolom anak dari .equal-cols. Seperti ini:

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

Tanpa polyfill ini kolom akan berperilaku seperti kolom Bootstrap biasa sehingga merupakan fallback yang cukup bagus.

Anda dapat menggunakan inline-flex juga yang berfungsi cukup baik dan mungkin sedikit lebih bersih daripada memodifikasi setiap elemen baris dengan CSS.

Untuk proyek saya, saya ingin setiap baris yang elemen anak-anak memiliki batas sama tingginya sehingga perbatasan akan terlihat bergerigi. Untuk ini saya membuat kelas css sederhana.

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

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

Dari:

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

solusi jquery nakal jika ada yang tertarik. Pastikan semua cols Anda (el) memiliki nama kelas yang sama ... berfungsi juga secara responsif jika Anda mengikatnya ke $ (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});
    });
}

Pemakaian

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

Catatan: Posting ini telah diedit sesuai komentar @Chris bahwa kode hanya menetapkan ketinggian tertinggi terakhir dalam $.each()fungsi

Beberapa jawaban sebelumnya menjelaskan cara membuat divs sama tinggi, tetapi masalahnya adalah ketika lebar terlalu sempit divs tidak akan menumpuk, karena itu Anda dapat menerapkan jawaban mereka dengan satu bagian tambahan. Untuk masing-masing Anda dapat menggunakan nama CSS yang diberikan di sini sebagai tambahan dari kelas baris yang Anda gunakan, jadi div akan terlihat seperti ini jika Anda selalu ingin div tersebut bersebelahan:

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

Untuk semua layar:

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

Untuk saat Anda ingin menggunakan 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;
    }
}

Untuk saat Anda ingin 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;
    }
}

Untuk saat Anda ingin menggunakan 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 Berdasarkan komentar, memang ada solusi yang lebih sederhana, tetapi Anda harus memastikan untuk memberikan info kolom dari lebar terbesar yang diinginkan untuk semua ukuran hingga xs (misalnya <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;
}

Saya terkejut saya tidak dapat menemukan solusi yang berguna di sini pada akhir tahun 2018. Saya melanjutkan dan menemukan solusi Bootstrap 3 sendiri menggunakan flexbox.

Contoh bersih dan sederhana:

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

Lihat demo yang berfungsi: http://jsfiddle.net/5kmtfrny/

Saya tahu saya sangat terlambat tetapi sekarang Anda dapat menggunakan atribut gaya "min-height" untuk mencapai tujuan Anda.

Jika ada yang menggunakan bootstrap 4 dan mencari kolom dengan tinggi yang sama gunakan row-eq-heightuntuk div induk

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

inilah solusi saya (kompilasi 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;
  }
}

Jadi kode Anda akan terlihat seperti:

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

Pada dasarnya ini adalah sistem yang sama yang Anda gunakan dengan .col-*kelas dengan perbedaan yang perlu Anda terapkan.row-* kelas ke baris itu sendiri.

Dengan .row-sm-eqkolom akan ditumpuk di layar XS. Jika Anda tidak membutuhkannya untuk ditumpuk di layar apa pun yang dapat Anda gunakan .row-xs-eq.

Versi SASS yang sebenarnya kami gunakan:

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

Demo langsung

Catatan: mencampur .col-xs-12dan .col-xs-6di dalam satu baris tidak akan berfungsi dengan baik.

Ada masalah dengan menggunakan Solusi 1 saat menerapkannya hanya pada kolom di baris. Ingin meningkatkan Solusi 1.

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

(Maaf, tidak dapat mengomentari jawaban Popnoodles. Saya tidak memiliki reputasi yang cukup)

Terbaik di luar sana:

Github reflex - Documents

Bekerja dengan bootstrap

Memperbarui:

1. Sertakan CSS
2. Perbarui kode Anda:

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

Inilah metode saya, saya telah menggunakan flex dengan beberapa perubahan dalam permintaan 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;
  }
}

kemudian menambahkan kelas ke induk yang diperlukan.

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

Saya menggunakan breakpoint responsif karena fluks biasanya menghambat sifat responsif bootstrap standar.

Saya menggunakan solusi super mudah ini dengan clearfix , yang tidak memiliki efek samping.

Berikut ini adalah contoh di 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>

Dan satu lagi contoh di 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; ?>

Bagi mereka yang mencari solusi cepat dan mudah - jika Anda memiliki set konten blok yang relatif konsisten, setinggi minimum pada div yang sedikit lebih besar daripada blok terbesar dapat lebih mudah diimplementasikan.

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

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

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

di mana .container-height adalah kelas gaya yang harus ditambahkan ke elemen gaya .row dimana semua .col * anak-anaknya memiliki tinggi yang sama.

Menerapkan gaya ini hanya untuk beberapa .row tertentu (dengan .container-height, seperti dalam contoh) juga menghindari menerapkan margin dan padding overflow untuk semua .col *.

Saya mencari solusi untuk masalah yang sama, dan menemukan satu hanya berfungsi !! - dengan hampir tidak ada kode tambahan ..

lihat https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 untuk pencairan yang baik, dan dengan resposne yang Anda inginkan di bagian bawah, dengan tautan.

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

ini adalah cara responsif yang benar bagi saya ... kutipan: ... 3 - Gunakan flexbox (terbaik!)

Pada 2017, cara terbaik (dan termudah) untuk membuat kolom tinggi yang sama dalam desain responsif menggunakan CSS3 flexbox.

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

dan cukup gunakan:

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>

Contoh:

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

Diadaptasi dari beberapa jawaban di sini. Jawaban berbasis flexbox adalah cara yang benar setelah IE8 dan 9 mati, dan sekali Android 2.x mati, tetapi itu tidak benar pada tahun 2015, dan kemungkinan tidak akan pada 2016. IE8 dan 9 masih terdiri dari 4- 6% penggunaan tergantung pada bagaimana Anda mengukur, dan bagi banyak pengguna korporat, ini jauh lebih buruk. http://caniuse.com/#feat=flexbox

The display: table, display: table-celltrik ini lebih mundur-kompatibel - dan satu hal yang besar adalah masalah kompatibilitas hanya serius adalah masalah Safari mana pasukan box-sizing: border-box, sesuatu yang sudah diterapkan pada tag Bootstrap Anda. http://caniuse.com/#feat=css-table

Anda jelas dapat menambahkan lebih banyak kelas yang melakukan hal serupa, seperti .equal-height-md . Saya mengikat ini ke divs untuk manfaat kinerja kecil dalam penggunaan terbatas saya, tetapi Anda bisa menghapus tag untuk membuatnya lebih digeneralisasi seperti sisa Bootstrap.

Perhatikan bahwa jsfiddle di sini menggunakan CSS, dan, hal-hal yang sebaliknya akan disediakan oleh hard-coded dalam contoh yang ditautkan. Misalnya @ screen-sm-min telah diganti dengan yang akan dimasukkan Less - 768px.

Jika masuk akal dalam konteks Anda, Anda bisa menambahkan div 12 kolom kosong setelah setiap istirahat, yang bertindak sebagai pembagi yang memeluk bagian bawah sel tertinggi di baris Anda.

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

Semoga ini membantu!

Saya pikir saya baru saja menambahkan bahwa jawaban yang diberikan oleh Dr.Flink juga dapat diterapkan pada Bootstrap 3 form-horizontal blok - yang bisa sangat berguna jika Anda ingin menggunakan warna latar belakang untuk setiap sel. Agar ini berfungsi untuk form bootstrap, Anda perlu membungkus konten form yang hanya berfungsi untuk mereplikasi struktur seperti tabel.

Contoh di bawah ini juga menyediakan CSS yang menunjukkan permintaan media tambahan yang memungkinkan Bootstrap 3 untuk mengambil alih dan melakukan hal yang normal pada layar yang lebih kecil. Ini juga berfungsi di IE8 +.

Contoh:

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

Coba ini lakukan melalui 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>

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

Jadi ya, Bootstrap 4 membuat semua cols dalam satu baris sama dengan tinggi, namun jika Anda membuat perbatasan di sekitar konten di dalam baris, Anda mungkin menemukan bahwa sepertinya cols bukan ketinggian yang sama!

Ketika saya menerapkan height: 100%elemen di dalam col saya menemukan bahwa saya kehilangan margin saya.

Solusi saya adalah dengan menggunakan bantalan pada div col (bukan margin pada elemen dalam). Seperti itu:

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

Contoh kode di atas menggunakan Bootstrap 4.1 untuk membuat satu set sembilan kotak dengan perbatasan

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

03/19/2019

** Bootstrap 4 Solusi Tinggi Ketinggian **

Utilitas Bootstrap / fleksibel untuk ketinggian yang sama

Contoh langsung dalam Codepen

Tinggi yang sama dengan kelas bootstrap dengan div induk tetap heightataumin-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>

Anda dapat membungkus kolom di dalam 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>