부트 스트랩을 사용하고 있습니다. 세 개의 기둥을 모두 같은 높이로 만들려면 어떻게해야합니까?

다음은 문제의 스크린 샷입니다. 파란색과 빨간색 열이 노란색 열과 같은 높이가 되길 원합니다.

코드는 다음과 같습니다.

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

부트 스트랩 4를 사용하는 솔루션 4

Bootstrap 4는 Flexbox를 사용하므로 추가 CSS가 필요 없습니다.

데모

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

음수 여백을 사용하는 솔루션 1 (응답 성이 깨지지 않음)

데모

.row{
    overflow: hidden; 
}

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

테이블을 사용하는 솔루션 2

데모

.row {
    display: table;
}

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

flex를 사용한 솔루션 3 은 2015 년 8 월에 추가되었습니다.이 솔루션 전에는 의견이 게시되지 않았습니다.

데모

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

2020 업데이트

CSS flexbox를 사용 하는 Bootstap 3.x에 대한 최선의 접근 방식 (최소 CSS 필요)

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

동일한 높이 flexbox 예제 부트 스트랩

특정 중단 점에 동일한 높이의 플렉스 박스 만 적용하려면 (반응 형) 미디어 쿼리를 사용하십시오. 예를 들어 다음은 sm(768px) 이상입니다.

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

이 솔루션은 여러 행 (열 줄 바꿈)에도 잘 작동합니다.
https://www.bootply.com/gCEXzPMehZ

다른 해결 방법

이러한 옵션은 다른 사람들이 권장하지만 반응 형 디자인 에는 적합하지 않습니다 . 이들은 열 줄 바꿈이없는 간단한 단일 행 레이아웃에만 작동합니다.

1) 큰 음수 여백 및 패딩 사용

2) display : table-cell 사용 (이 솔루션은 반응 형 그리드에도 영향을 미치므로 @media 쿼리는 table열이 세로로 쌓이기 전에 더 넓은 화면 에만 표시하는 데 사용할 수 있음 )

부트 스트랩 4

Flexbox는 이제 Bootstrap 4에서 기본적으로 사용되므로 추가 CSS가 동일한 높이 열을 만들 필요가 없습니다 : http://www.codeply.com/go/IJYRI4LPwU

예:

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

자바 스크립트가 필요하지 않습니다. 다음 과 같이 .row-eq-height기존 클래스 를 추가하십시오 .row.

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

팁 : 행에 열이 12 개를 초과하면 부트 스트랩 그리드가 줄 바꿈에 실패합니다. 따라서 div.row.row-eq-height12 열마다 새로운 것을 추가하십시오 .

팁 : 추가해야 할 수도 있습니다

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

당신의 HTML에

귀하의 질문에 대답하기 위해 접두사 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;
    }
}

위의 스크린 샷과 같이 플렉스 열 내에서 썸네일 컨텐츠 플렉스에 대한 지원을 추가하려면 다음을 추가하십시오 ... 패널을 사용 하여이 작업을 수행 할 수 있습니다.

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

flexbox는 IE9 이하에서 작동하지 않지만 Javascript 그리드 와 같은 조건부 태그를 폴리 필로 사용하여 대체를 사용하여 데모를 사용할 수 있습니다 .

<!--[if lte IE 9]>

<![endif]-->

허용 된 답변의 다른 두 가지 예는 ... 테이블 데모는 괜찮은 아이디어이지만 잘못 구현되고 있습니다. 부트 스트랩 열 클래스에 CSS를 적용하면 그리드 프레임 워크가 완전히 손상됩니다. [class*='col-']너비가 정의 된 테이블 스타일은 1과 2에 대해 사용자 정의 선택기를 사용해야합니다 . 높이와 너비가 같은 열을 원할 경우에만이 방법을 사용해야합니다. 다른 레이아웃 용이 아니며 반응이 없습니다. 그러나 모바일 디스플레이에서 대체 할 수 있습니다 ...

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

마지막으로, 하나의 실제 레이아웃 버전을 구현하는 승인 된 답변의 첫 번째 데모는 일부 상황에서는 적합하지만 부트 스트랩 열에는 적합하지 않습니다. 그 이유는 모든 열이 컨테이너 높이로 확장되기 때문입니다. 따라서 열이 옆의 요소가 아닌 전체 컨테이너로 확장되므로 응답 성이 손상됩니다. 이 방법을 사용하면 더 이상 행에 아래쪽 여백을 적용 할 수 없으며 앵커 태그로 스크롤하는 등 다른 문제가 발생할 수 있습니다.

전체 코드는 flexbox 코드를 자동으로 접두어로 추가 한 Codepen을 참조하십시오.

하나의 행만 표시하므로 유스 케이스가 해당 행으로 제한 될 수 있습니다. 여러 행이있는 경우이 플러그인 -github Javascript-grids- 가 완벽하게 작동합니다! 각 패널을 가장 높은 패널로 확장하여 해당 행에서 가장 높은 패널을 기준으로 각 행에 다른 높이를 지정할 수 있습니다. jquery 솔루션 대 CSS이지만 대안 접근법으로 권장하고 싶었습니다.

모든 브라우저에서이 작업을 수행하려면 javascript를 사용하십시오.

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

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

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

이 스레드와 다른 페이지에서 제안한 것들을 많이 시도했지만 모든 브라우저에서 100 % 작동하지는 않았습니다.

그래서 나는 꽤 많은 시간을 실험하고 이것을 생각해 냈습니다. 1 개의 클래스 만 있는 flexbox 를 사용하여 Bootstrap Equal Height 열 을 위한 완벽한 솔루션 . 이것은 모든 주요 브라우저 IE10 +에서 작동합니다.

CSS :

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

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

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML :

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

더 많은 버전의 IE를 지원하려면 예를 들어 https://github.com/liabru/jquery-match-height를 사용 하고의 모든 하위 열을 타겟팅 할 수 있습니다 .equal-cols. 이처럼 :

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

이 폴리 필이 없으면 열은 일반적인 부트 스트랩 열처럼 작동하므로 대체로 좋습니다.

CSS로 모든 행 요소를 수정하는 것보다 약간 잘 작동하는 inline-flex도 사용할 수 있습니다.

내 프로젝트의 경우 자식 요소의 모든 행에 동일한 높이의 테두리가 있었기 때문에 테두리가 들쭉날쭉하게 보이기를 원했습니다. 이를 위해 간단한 CSS 클래스를 만들었습니다.

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

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

에서:

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

누군가 관심이 있다면 건방진 jquery 솔루션. 모든 동료 (el)가 공통 클래스 이름을 가지고 있는지 확인하십시오. $ (window) .resize에 바인딩하면 반응 형으로 작동합니다.

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

용법

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

참고 :이 게시물은 @Chris의 의견에 따라 코드가 $.each()함수 에서 마지막으로 가장 높은 높이로 설정되었다는 의견에 따라 편집되었습니다

이전 답변 중 일부는 div를 동일한 높이로 만드는 방법을 설명하지만 문제는 너비가 너무 좁을 때 div가 스택되지 않으므로 하나의 추가 부분으로 답변을 구현할 수 있다는 것입니다. 각각에 대해 사용하는 행 클래스 외에도 여기에 제공된 CSS 이름을 사용할 수 있으므로 div가 항상 서로 옆에 있기를 원하면 div는 다음과 같이 표시되어야합니다.

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

모든 화면에서 :

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

sm을 사용하려는 경우 :

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

MD를 원할 때 :

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

lg를 사용하려는 경우 :

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

편집 주석을 기반으로 실제로 더 간단한 해결책이 있지만 모든 크기에 대해 원하는 최대 너비에서 xs까지 열 정보를 제공해야합니다 (예 <div class="col-md-3 col-sm-4 col-xs-12">:

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

2018 년 후반에 가치있는 솔루션을 찾을 수 없다는 것에 놀랐습니다. Flexbox를 사용하여 Bootstrap 3 솔루션을 직접 알아 냈습니다.

깨끗하고 간단한 예 :

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

실무 데모보기 : http://jsfiddle.net/5kmtfrny/

나는 매우 늦었다는 것을 알고 있지만 이제는 "최소 높이"스타일 속성을 사용하여 목적을 달성 할 수 있습니다.

부트 스트랩 4를 사용하고 동일한 높이 열을 찾는 사람 row-eq-height이 부모 div를 사용 하는 경우

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

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

다음은 내 솔루션입니다 (컴파일 된 CSS).

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

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

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

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

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

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

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

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

따라서 코드는 다음과 같습니다.

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

기본적으로 이것은 .col-*클래스와 함께 사용하는 것과 동일한 시스템으로 클래스 .row-*자체를 행 자체 에 적용해야 합니다.

로 .row-sm-eq열이 XS 화면에 적재됩니다. 화면에 쌓을 필요가없는 경우을 사용할 수 있습니다 .row-xs-eq.

우리가 실제로 사용하는 SASS 버전 :

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

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

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

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

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

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

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

라이브 데모

참고 : 혼합 .col-xs-12및 .col-xs-6단일 행 내부는 제대로 작동하지 않습니다.

행 1의 열에 만 적용하는 동안 솔루션 1을 사용하는 데 문제점이 있습니다. 솔루션 1을 개선하고 싶습니다.

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

(죄송합니다, Popnoodles의 anwer를 말할 수 없습니다. 나는 평판이 충분하지 않습니다)

거기에서 최고 :

Github 리플렉스-문서

부트 스트랩과 함께 작동

최신 정보:

1. CSS 포함
2. 코드를 업데이트하십시오 :

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

여기 내 방법이 있습니다. 미디어 쿼리에서 일부 변경 사항에 flex를 사용했습니다.

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

그런 다음 필요한 클래스를 부모에 추가했습니다.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

플럭스는 일반적으로 부트 스트랩 표준 반응 특성을 방해하기 때문에 반응 형 중단 점을 사용하고 있습니다.

나는이 슈퍼 쉬운 솔루션을 사용 clearfix하는데 부작용이 없습니다.

AngularJS에 대한 예는 다음과 같습니다.

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

그리고 PHP에 대한 또 다른 예 :

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

빠르고 쉬운 솔루션을 찾는 사람들을 위해-비교적 일관된 블록 컨텐츠 세트가 있다면 가장 큰 블록보다 약간 큰 div의 최소 높이를 설정하면 구현하기가 더 쉬울 수 있습니다.

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

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

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

여기서 .container-height는 모든 .col * 자식의 높이가 동일한 .row 스타일 요소에 추가되어야하는 스타일 클래스입니다.

이러한 스타일을 특정 .row에만 적용하면 (예와 같이 .container-height 사용) 모든 .col *에 여백 및 패딩 오버플로가 적용되지 않습니다.

나는 같은 문제에 대한 해결책을 찾았고 방금 일한 것을 발견했습니다 !! -추가 코드가 거의 없습니다.

보다 좋은 간결함과 하단에 원하는 응답과 링크가있는 https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 을 하십시오 .

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

이것은 나에게 맞는 반응 형 방법이었다 ... 따옴표 : ... 3 — flexbox 사용 (최고!)

2017 년 현재 반응 형 디자인에서 동일한 높이의 열을 만드는 가장 좋은 방법은 CSS3 flexbox를 사용하는 것입니다.

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

간단하게 사용하십시오 :

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

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

예:

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

여기에 몇 가지 답변이 있습니다. Flex8 기반 답변은 IE8과 9가 죽고 Android 2.x가 죽은 후에는 올바른 방법입니다. 그러나 2015 년에는 그렇지 않으며 2016 년이 아닐 수도 있습니다. IE8과 9는 여전히 4를 구성합니다. 측정 방식에 따라 6 %의 사용량이 발생하며 많은 기업 사용자에게는 훨씬 더 나쁩니다.http://caniuse.com/#feat=flexbox

display: table, display: table-cell트릭은 더 이전 버전과 호환 - 하나 좋은 점은 심각한 호환성 문제가 힘 사파리 문제입니다 box-sizing: border-box, 뭔가 이미 부트 스트랩 태그에 적용했다. http://caniuse.com/#feat=css-table

와 같은 유사한 일을하는 클래스를 추가 할 수 있습니다 .equal-height-md. 제한된 사용량에서 작은 성능상의 이점을 위해 이것을 div에 묶었지만 태그를 제거하여 나머지 Bootstrap과 같이 일반화 할 수 있습니다.

여기서 jsfiddle은 CSS를 사용하므로 Less 예제에서 제공하는 것은 링크 된 예제에서 하드 코딩됩니다. 예를 들어 @ screen-sm-min은 Less가 삽입하는 것-768px로 대체되었습니다.

상황에 맞는 경우 각 나누기 후에 빈 12 열 div를 추가하면 행에서 가장 높은 셀의 맨 아래를 포옹하는 디바이더 역할을합니다.

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

도움이 되었기를 바랍니다!

Dr.Flink가 제공 한 답변을 Bootstrap 3 form-horizontal블록 에도 적용 할 수 있다고 생각했습니다. 각 셀에 배경색을 사용하려는 경우 매우 유용 할 수 있습니다. 이것이 부트 스트랩 양식에 대해 작동하려면 테이블과 같은 구조를 복제하는 역할을하는 양식 내용을 랩핑해야합니다.

아래 예제는 또한 추가 미디어 쿼리를 통해 부트 스트랩 3이 간단히 인계하여 작은 화면에서 정상적인 작업을 수행 할 수 있음을 보여주는 CSS를 제공합니다. 이것은 IE8 +에서도 작동합니다.

예:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>

.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

플렉스 박스를 통해이 작업을 시도하십시오

.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- https: //jsfiddle.net/grinmax_/spsn4fnq/

따라서 부트 스트랩 4는 모든 열을 동일한 높이로 만들지 만 행 내부의 내용 주위에 테두리를 만들면 열이 같은 높이가 아닌 것처럼 보일 수 있습니다!

height: 100%열 내부의 요소에 적용했을 때 나는 여백을 잃어버린 것을 발견했습니다.

내 솔루션은 내부 요소의 여백 대신 col의 div에 패딩을 사용하는 것입니다. 이렇게 :

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

위의 코드 예제는 Bootstrap 4.1을 사용하여 테두리가있는 9 개의 상자 세트를 만듭니다.

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 동등한 높이 솔루션 **

동일한 높이의 부트 스트랩 유틸리티 / 플렉스

Codepen의 라이브 예

부모 div가 고정 된 부트 스트랩 클래스로 동일한 높이 height또는min-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>