귀하의 질문에 대답하기 위해 접두사 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을 참조하십시오.

답변

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

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

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

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

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

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