Tôi đang sử dụng Bootstrap. Làm thế nào tôi có thể làm cho ba cột có cùng chiều cao?

Dưới đây là một ảnh chụp màn hình của vấn đề. Tôi muốn các cột màu xanh và đỏ có cùng chiều cao với cột màu vàng.

Đây là mã:

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

Giải pháp 4 sử dụng Bootstrap 4

Bootstrap 4 sử dụng Flexbox nên không cần thêm CSS.

Bản giới thiệu

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

Giải pháp 1 sử dụng lề âm (không phá vỡ phản hồi)

Bản giới thiệu

.row{
    overflow: hidden; 
}

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

Giải pháp 2 sử dụng bảng

Bản giới thiệu

.row {
    display: table;
}

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

Giải pháp 3 sử dụng flex được thêm vào tháng 8 năm 2015. Nhận xét được đăng trước đây không áp dụng cho giải pháp này.

Bản giới thiệu

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

Cập nhật 2020

Cách tiếp cận tốt nhất cho Bootstap 3.x - sử dụng CSS flexbox (và yêu cầu CSS tối thiểu) ..

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

Bootstrap cùng chiều cao ví dụ flexbox

Để chỉ áp dụng cùng một flexbox chiều cao tại các điểm dừng cụ thể (đáp ứng), hãy sử dụng truy vấn phương tiện. Ví dụ: ở đây là sm(768px) trở lên:

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

Giải pháp này cũng hoạt động tốt cho nhiều hàng (gói cột):
https://www.bootply.com/gCEXzPMehZ

Cách giải quyết khác

Các tùy chọn này sẽ được đề xuất bởi những người khác, nhưng không phải là một ý tưởng tốt cho thiết kế đáp ứng. Chúng chỉ hoạt động đối với bố trí hàng đơn giản với gói cột.

1) Sử dụng tỷ lệ lợi nhuận lớn và phần đệm

2) Sử dụng hiển thị: ô bảng (giải pháp này cũng ảnh hưởng đến lưới phản hồi, do đó, truy vấn @media có thể được sử dụng để chỉ áp dụng tablehiển thị trên màn hình rộng hơn trước khi các cột xếp theo chiều dọc)

Bootstrap 4

Hiện tại Flexbox được sử dụng theo mặc định trong Bootstrap 4, do đó không cần thêm CSS để tạo các cột có chiều cao bằng nhau: http://www.codeply.com/go/IJYRI4LPwU

Thí dụ:

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

Không cần JavaScript. Chỉ cần thêm lớp .row-eq-heightvào hiện tại của bạn .rownhư thế này:

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

Mẹo: nếu bạn có nhiều hơn 12 cột trong hàng của mình, lưới bootstrap sẽ không thể bọc nó. Vì vậy, thêm một div.row.row-eq-heightcột mới mỗi 12 cột.

Mẹo: bạn có thể cần thêm

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

vào html của bạn

Để trả lời câu hỏi của bạn, đây là tất cả những gì bạn cần, xem bản demo đáp ứng đầy đủ với css có tiền tố :

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

Để thêm hỗ trợ cho flex nội dung hình thu nhỏ trong các cột flex như ảnh chụp màn hình ở trên cũng thêm điều này ... Lưu ý bạn cũng có thể làm điều này với các bảng:

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

Mặc dù flexbox không hoạt động trong IE9 và bên dưới, bạn có thể sử dụng bản demo với dự phòng bằng cách sử dụng các thẻ có điều kiện với một cái gì đó như lưới javascript như một polyfill:

<!--[if lte IE 9]>

<![endif]-->

Đối với hai ví dụ khác trong câu trả lời được chấp nhận ... Bản demo bảng là một ý tưởng hay nhưng đang được thực hiện sai. Áp dụng CSS đó vào các lớp cột bootstrap cụ thể sẽ không nghi ngờ gì phá vỡ hoàn toàn khung lưới. Bạn nên sử dụng bộ chọn tùy chỉnh cho một và hai kiểu bảng không được áp dụng cho [class*='col-']chiều rộng đã xác định. Phương pháp này CHỈ nên được sử dụng nếu bạn muốn các cột có chiều cao và chiều rộng bằng nhau. Nó không có nghĩa cho bất kỳ bố trí khác và KHÔNG đáp ứng. Chúng tôi có thể làm cho nó dự phòng tuy nhiên trên màn hình di động ...

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

Cuối cùng, bản demo đầu tiên trong câu trả lời được chấp nhận thực hiện một phiên bản của bố cục thực là một lựa chọn tốt cho một số tình huống, nhưng không phù hợp với các cột bootstrap. Lý do cho điều này là tất cả các cột mở rộng đến chiều cao của container. Vì vậy, điều này cũng sẽ phá vỡ khả năng đáp ứng vì các cột không mở rộng thành các phần tử bên cạnh chúng, mà là toàn bộ vùng chứa. Phương pháp này cũng sẽ không cho phép bạn áp dụng lề dưới cho các hàng nữa và cũng sẽ gây ra các vấn đề khác trên đường đi như cuộn đến thẻ neo.

Để biết mã hoàn chỉnh, hãy xem Codepen tự động tiền tố mã flexbox.

Bạn chỉ hiển thị một hàng để trường hợp sử dụng của bạn có thể bị giới hạn chỉ như vậy. Chỉ trong trường hợp bạn có nhiều hàng, plugin này - github Javascript-grids - hoạt động hoàn hảo! Nó làm cho mỗi bảng mở rộng lên bảng cao nhất, tạo cho mỗi hàng có khả năng có chiều cao khác nhau dựa trên bảng cao nhất trong hàng đó. Đó là một giải pháp jquery so với css, nhưng muốn giới thiệu nó như một cách tiếp cận khác.

Nếu bạn muốn làm cho nó hoạt động trong bất kỳ trình duyệt nào, hãy sử dụng javascript:

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

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

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

Tôi đã thử rất nhiều đề xuất được đưa ra trong chủ đề này và trên các trang khác nhưng không có giải pháp nào hoạt động 100% trong mọi trình duyệt.

Vì vậy, tôi đã thử nghiệm khá lâu và nghĩ ra điều này. Một giải pháp hoàn chỉnh cho các cột Bootstrap Equal height với sự trợ giúp của flexbox chỉ với 1 lớp. Điều này hoạt động trong tất cả các trình duyệt chính 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>

Ví dụ, để hỗ trợ nhiều phiên bản IE hơn, bạn có thể sử dụng https://github.com/liabru/jquery-match-height và nhắm mục tiêu tất cả các cột con của .equal-cols. Như thế này:

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

Không có polyfill này, các cột sẽ hoạt động như các cột Bootstrap thông thường, do đó, đây là một dự phòng khá tốt.

Bạn có thể sử dụng nội tuyến-flex cũng hoạt động khá tốt và có thể sạch hơn một chút so với sửa đổi mọi thành phần hàng bằng CSS.

Đối với dự án của tôi, tôi muốn mọi hàng của các phần tử con có đường viền có cùng chiều cao để các đường viền trông có vẻ lởm chởm. Đối với điều này, tôi đã tạo ra một lớp css đơn giản.

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

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

Từ:

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

giải pháp jquery táo bạo nếu bất cứ ai quan tâm. Chỉ cần đảm bảo rằng tất cả các cols (el) của bạn có một tên lớp chung ... cũng hoạt động một cách đáp ứng nếu bạn liên kết nó với $ (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});
    });
}

Sử dụng

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

Lưu ý: Bài đăng này đã được chỉnh sửa theo nhận xét của @Chris rằng mã chỉ được đặt chiều cao cao nhất cuối cùng trong $.each()chức năng

Một số câu trả lời trước giải thích cách làm cho các div có cùng chiều cao, nhưng vấn đề là khi chiều rộng quá hẹp, các div sẽ không xếp chồng lên nhau, do đó bạn có thể thực hiện câu trả lời của chúng với một phần phụ. Đối với mỗi cái, bạn có thể sử dụng tên CSS được cung cấp ở đây ngoài lớp hàng mà bạn sử dụng, vì vậy div sẽ trông như thế này nếu bạn luôn muốn các div nằm cạnh nhau:

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

Đối với tất cả các màn hình:

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

Đối với khi bạn muốn sử dụng 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;
    }
}

Để khi bạn muốn 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;
    }
}

Khi bạn muốn sử dụng 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 Dựa trên một nhận xét, thực sự có một giải pháp đơn giản hơn, nhưng bạn cần đảm bảo cung cấp thông tin cột từ chiều rộng mong muốn lớn nhất cho tất cả các kích thước xuống xs (ví dụ <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;
}

Tôi ngạc nhiên tôi không thể tìm thấy một giải pháp đáng giá ở đây vào cuối năm 2018. Tôi đã tiếp tục và tự mình tìm ra giải pháp Bootstrap 3 bằng flexbox.

Ví dụ đơn giản và gọn gàng:

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

Xem bản demo làm việc: http://jsfiddle.net/5kmtfrny/

Tôi biết tôi đến rất muộn nhưng bây giờ bạn có thể sử dụng thuộc tính kiểu "min-height" để đạt được mục đích của mình.

Nếu bất cứ ai sử dụng bootstrap 4 và tìm kiếm các cột có chiều cao bằng nhau, chỉ cần sử dụng row-eq-heightđể div cha

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

Tham chiếu: http://getbootstrap.com.vn/examples/equal-height-columns/

đây là giải pháp của tôi (CSS được biên dịch):

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

Vì vậy, mã của bạn sẽ trông như sau:

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

Về cơ bản đây là cùng một hệ thống bạn sử dụng với .col-*các lớp có sự khác biệt mà bạn cần áp dụng.row-* các lớp cho chính hàng đó.

Với .row-sm-eqcác cột sẽ được xếp chồng lên nhau trên màn hình XS. Nếu bạn không cần chúng được xếp chồng lên nhau trên bất kỳ màn hình nào bạn có thể sử dụng .row-xs-eq.

Phiên bản SASS mà chúng tôi thực sự sử dụng:

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

Bản thử trực tiếp

Lưu ý: trộn .col-xs-12và .col-xs-6bên trong một hàng sẽ không hoạt động đúng.

Có một vấn đề với việc sử dụng Giải pháp 1 trong khi chỉ áp dụng nó trên cột trong các hàng. Muốn cải thiện Giải pháp 1.

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

(Xin lỗi, không thể nhận xét anwer của Popnoodles. Tôi không đủ danh tiếng)

Tốt nhất hiện có:

Phản xạ Github - Tài liệu

Hoạt động với bootstrap

Cập nhật:

1. Bao gồm CSS
2. Cập nhật mã của bạn:

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

Đây là phương pháp của tôi, tôi đã sử dụng flex với một số thay đổi trong truy vấn phương tiện truyền thông.

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

sau đó thêm các lớp cho cha mẹ được yêu cầu.

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

Tôi đang sử dụng các điểm dừng đáp ứng vì thông lượng thường cản trở bản chất đáp ứng tiêu chuẩn bootstrap.

Tôi sử dụng giải pháp siêu dễ dàng này với clearfix , không có tác dụng phụ.

Đây là một ví dụ trên 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>

Và một ví dụ nữa về 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; ?>

Đối với những người tìm kiếm một giải pháp nhanh chóng, dễ dàng - nếu bạn có một bộ nội dung khối tương đối nhất quán, đặt chiều cao tối thiểu trên div lớn hơn một chút so với khối lớn nhất có thể dễ dàng thực hiện hơn.

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

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

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

trong đó .container-height là lớp kiểu phải được thêm vào một phần tử theo kiểu .row mà tất cả các con .col * của nó có cùng chiều cao.

Chỉ áp dụng các kiểu này cho một số .row cụ thể (với .container height, như trong ví dụ) cũng tránh áp dụng tràn lề và phần đệm cho tất cả .col *.

Tôi đã tìm kiếm một giải pháp cho cùng một vấn đề, và thấy một giải pháp chỉ hoạt động !! - gần như không có thêm mã ..

xem https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 để biết cách giải quyết tốt và với phản hồi bạn muốn ở phía dưới, với một liên kết.

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

đây là cách phản hồi chính xác đối với tôi ... một trích dẫn: ... 3 - Sử dụng flexbox (tốt nhất!)

Kể từ năm 2017, cách tốt nhất (và dễ nhất) để tạo các cột có chiều cao bằng nhau trong thiết kế đáp ứng là sử dụng flexbox CSS3.

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

và chỉ cần sử dụng:

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>

Thí dụ:

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

Chuyển thể từ một số câu trả lời ở đây. Các câu trả lời dựa trên flexbox là cách đúng đắn khi IE8 và 9 đã chết và một khi Android 2.x đã chết, nhưng điều đó không đúng trong năm 2015, và có khả năng sẽ không có trong năm 2016. IE8 và 9 vẫn chiếm 4 - 6% mức sử dụng tùy thuộc vào cách bạn đo lường và đối với nhiều người dùng doanh nghiệp, điều đó còn tệ hơn nhiều. http://caniuse.com/#feat=flexbox

Các display: table, display: table-cellBí quyết là hơn tương thích ngược - và một điều tuyệt vời là vấn đề tương thích chỉ nghiêm trọng là một vấn đề Safari nơi nó lực lượng box-sizing: border-box, một cái gì đó đã áp dụng cho thẻ Bootstrap của bạn. http://caniuse.com/#feat=css-table

Bạn rõ ràng có thể thêm nhiều lớp làm những việc tương tự, như .equal-height-md. Tôi đã gắn những thứ này với div vì lợi ích hiệu suất nhỏ trong cách sử dụng bị hạn chế của tôi, nhưng bạn có thể xóa thẻ để làm cho nó khái quát hơn như phần còn lại của Bootstrap.

Lưu ý rằng jsfiddle ở đây sử dụng CSS, và do đó, những thứ mà Ít cung cấp sẽ được mã hóa cứng trong ví dụ được liên kết. Ví dụ: @ screen-sm-min đã được thay thế bằng những gì Ít sẽ chèn - 768px.

Nếu nó có ý nghĩa trong ngữ cảnh của bạn, bạn có thể chỉ cần thêm một div 12 cột trống sau mỗi lần ngắt, hoạt động như một dải phân cách ôm phần dưới cùng của ô cao nhất trong hàng của bạn.

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

Hi vọng điêu nay co ich!

Tôi nghĩ rằng tôi chỉ cần thêm rằng câu trả lời do Dr.Flink đưa ra cũng có thể được áp dụng cho form-horizontalkhối Bootstrap 3 - rất hữu ích nếu bạn muốn sử dụng màu nền cho mỗi ô. Để làm việc này cho các biểu mẫu bootstrap, bạn sẽ cần phải bọc nội dung biểu mẫu chỉ phục vụ để sao chép cấu trúc giống như bảng.

Ví dụ dưới đây cũng cung cấp CSS thể hiện một truy vấn phương tiện bổ sung cho phép Bootstrap 3 đơn giản tiếp quản và thực hiện điều đó bình thường trên (các) màn hình nhỏ hơn. Điều này cũng hoạt động trong IE8 +.

Thí dụ:

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

Hãy thử làm điều này thông qua hộp flex

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

Mã nguồn trực tiếp - https://jsfiddle.net/grinmax_/spsn4fnq/

Vì vậy, có, Bootstrap 4 làm cho tất cả các cols trong một hàng có chiều cao bằng nhau, tuy nhiên nếu bạn đang tạo một đường viền xung quanh nội dung bên trong hàng, bạn có thể thấy rằng nó có vẻ như chiều cao không bằng nhau!

Khi tôi áp dụng height: 100% cho phần tử bên trong col tôi thấy rằng tôi bị mất lề.

Giải pháp của tôi là sử dụng phần đệm trên div của col (thay vì lề trên phần tử bên trong). Thích như vậy:

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

Ví dụ mã trên sử dụng Bootstrap 4.1 để tạo một bộ chín hộp có đường viền

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

Mã não

$('.option2').css({
    'height': $('.option2').height()
});

19/03/2019

** Bootstrap 4 Giải pháp chiều cao bằng nhau **

Bootstrap tiện ích / flex cho chiều cao bằng nhau

Ví dụ trực tiếp trong Codepen

Chiều cao bằng nhau của lớp bootstrap với div cha cố định heighthoặcmin-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>