높이가 다른 열이있는 부트 스트랩 행

현재 다음과 같은 것이 있습니다.

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

이제 content높이가 다르고 너비가 모두 같은 상자가 있다고 가정합니다 . 동일한 "그리드 기반 레이아웃"을 유지하면서 모든 상자가 완벽한 선 대신 서로 아래에 정렬되도록 할 수 있습니다.

현재 TWBS는 col-md-4이전 세 번째 행의 가장 긴 요소 아래에 의 다음 줄을 배치합니다 . 따라서 각 항목 행은 완벽하게 정렬되어 있습니다. 이것은 훌륭하지만 각 항목이 마지막 요소 ( "Masonry"레이아웃) 바로 아래에 놓 이길 원합니다 . )

이것은 인기있는 Bootstrap 질문이므로 Bootstrap 3 및 Bootstrap 4에 대한 답변을 업데이트 하고 확장했습니다.

부트 스트랩 3 " 높이 문제는 열을 사용하기 때문에"발생합니다 float:left. 열이 "부동"되면 문서의 정상적인 흐름에서 벗어납니다. 포함 상자의 가장자리에 닿을 때까지 왼쪽 또는 오른쪽으로 이동합니다. 따라서 열 높이 가 고르지 않은 경우 올바른 동작은 가장 가까운쪽에 쌓는 것입니다.

참고 : 아래의 옵션에 적용 할 수있는 열 포장 시나리오 가 하나에 12 개 이상의 COL 단위.row . 행에 12 개 이상의 열이있는 이유를 이해하지 못하는 독자 또는 솔루션이 "별도의 행 사용"이라고 생각하는 경우이 내용을 먼저 읽어야합니다.

이 문제를 해결할 수있는 몇 가지 방법이 있습니다 .. (2018 년 업데이트 됨)

1-이와 같은 'clearfix'접근 방식 ( Bootstrap에서 권장 ) ( X 열 마다 반복 필요 ). 이렇게하면 X 개의 열 마다 랩이 적용됩니다 .

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix 데모 (단일 계층)

Clearfix 데모 (반응 형 계층) -예.col-sm-6 col-md-4 col-lg-3

표가 있는 'clearfix'CSS 전용 clearfix 의 CSS 전용 변형도
있습니다.

이 문제는 높이 차이 로 인해 발생하므로 각 행에서 열 높이를 동일하게 만들 수 있습니다 . Flexbox는이를 수행하는 가장 좋은 방법이며 기본적으로 Bootstrap 4에서 지원됩니다 .

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

Flexbox 동일 높이 데모

다시 말하지만, 높이 문제는 열이 플로팅되기 때문에 발생합니다. 또 다른 옵션은 열을 display:inline-block및 로 설정하는 것 float:none입니다. 이것은 또한 수직 정렬에 더 많은 유연성을 제공합니다. 그러나이 솔루션을 사용하면 열 사이에 HTML 공백 이 없어야합니다 . 그렇지 않으면 인라인 블록 요소에 추가 공간이 있고 조기에 래핑됩니다.

인라인 블록 수정 데모

4-CSS3 컬럼 접근 (Masonry / Pinterest like solution) ..

이것은 Bootstrap 3의 기본이 아니지만 CSS 다중 열을 사용하는 또 다른 접근 방식 입니다. 이 접근 방식의 한 가지 단점은 열 순서가 왼쪽에서 오른쪽이 아니라 위에서 아래로 진행된다는 것입니다. Bootstrap 4에는 다음과 같은 유형의 솔루션이 포함되어 있습니다 . Bootstrap 4 Masonry cards Demo .

부트 스트랩 3 다중 열 데모

5-Masonry JavaScript / jQuery 접근 방식

마지막으로 Isotope / Masonry와 같은 플러그인을 사용할 수 있습니다.

Bootstrap Masonry Demo
벽돌 데모 2

부트 스트랩 가변 높이 열에 대한 추가 정보

Update 2018 기본적으로 flexbox를 사용하기 때문에 Bootstrap 4
에서 모든 열의 높이는 동일 하므로 "높이 문제"는 문제가되지 않습니다. 또한 Bootstrap 4에는 이러한 유형의 다중 열 솔루션이 포함되어 있습니다. Bootstrap 4 Masonry cards Demo .

어떤 이유로 이것은 .display-flex 클래스없이 나를 위해 일했습니다.

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

부트 스트랩 행에 대한 또 다른 확장 (또한 반응 적)을 만들었습니다. 다음과 같이 시도 할 수 있습니다.

.row.flexRow { display: flex; flex-wrap: wrap;}