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

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

---

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

<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 전용 변형도
있습니다.

---

2-열을 같은 높이로 만듭니다 (플렉스 박스 사용).

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...

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

Flexbox equal height Demo

---

3 - Un-float the columns an use inline-block instead..

Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.

Demo of inline block fix

---

4 - CSS3 columns approach (Masonry/Pinterest like solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of solution: Bootstrap 4 Masonry cards Demo.

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript/jQuery approach

Finally, you may want to use a plugin such as Isotope/Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

---

More on Bootstrap Variable Height Columns

---

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

참고 URL : https://stackoverflow.com/questions/22310912/bootstrap-row-with-columns-of-different-height