Bootstrap 3의 Fluid Grid에서 수평 정렬 문제를 해결하는 방법은 무엇입니까?

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

Bootstrap 3을 사용하여 유동 그리드 레이아웃을 생성하려고 하면 사용자에게 정렬 문제가 발생할 수 있습니다. 한 상자가 다른 상자의 높이를 넘어 확장되면 그리드 내의 상자가 수평으로 정렬되지 않습니다. 이러한 정렬 오류는 열의 콘텐츠 높이가 다양하기 때문에 발생합니다.

이 딜레마를 해결하려면 다음 세 가지 기본 접근 방식을 사용할 수 있습니다.

1. CSS3 열 너비를 통한 CSS 전용 솔루션

2. Clearfix 접근 방식

3. 동위원소/석조 플러그인

2017년 이후 업데이트

Flexbox(부트스트랩 4 및 나중에)

높이 불일치 문제에 대한 최신 해결책은 기본적으로 Bootstrap 4에 있는 Flexbox를 사용하여 열의 높이를 동일하게 만드는 것입니다.

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

추가 리소스

솔루션의 실시간 시연 및 추가 탐색을 위해 제공된 링크를 방문하세요. 이 주제에 대해.

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