Bootstrap 3 Fluid Grid 레이아웃에서 잘못 정렬된 상자를 수정하는 방법은 무엇입니까?

Bootstrap 3 유동 그리드 레이아웃 문제 해결

Bootstrap 3 유동 그리드 레이아웃 내에서 정렬 불량이 발생했습니까? 상자가 일렬로 정렬되지 않으면 실망스러운 문제가 될 수 있습니다. 근본 원인은 상자 내용물의 높이가 다양하기 때문입니다. 이 문제를 해결하는 효과적인 방법은 다음과 같습니다.

1. CSS 접근 방식(CSS3 열 너비)

CSS3 열 너비를 사용하여 다음 접근 방식을 구현합니다. [Bootply 데모](http://bootply.com/85737)

2 . 'Clearfix' 접근 방식(반응형 재설정)

Bootstrap에서 권장하는 'clearfix' 접근 방식 활용: [Bootply 데모](http://bootply.com/89910)

3. 동위원소/벽돌 플러그인

대체 솔루션의 경우 Isotope/Masonry 플러그인 사용을 고려해 보세요: [Bootply Demo](http://bootply.com/61482)

2017 업데이트: Flexbox 솔루션

Bootstrap 4, Flexbox는 최적의 솔루션을 제공합니다.

CSS:

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

데모: [Flexbox Equal Height](https://codepen.io/anon/pen/EbpvGe)

부트스트랩 가변 높이에 대한 추가 리소스 열:

• [Bootstrap 가변 높이 열](https://getbootstrap.com/docs/4.0/layout/grid/#equal-width)

위 내용은 Bootstrap 3 Fluid Grid 레이아웃에서 잘못 정렬된 상자를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!