Bootstrap 3에서 전체 높이 2열 레이아웃을 만드는 방법은 무엇입니까?

Bootstrap 3 전체 높이 2열 레이아웃

문제:

2개 만들기 -Bootstrap 3에서 전체 높이의 열 레이아웃은 부족으로 인해 어려움을 겪습니다. 이 특정 레이아웃에 대한 기본 지원을 제공합니다.

해결책:

Bootstrap 3 클래스만으로는 이를 달성할 수 없지만 CSS를 활용하여 사용자 정의 전체 높이 열 솔루션을 구현할 수 있습니다. CSS를 사용하여 테이블.

HTML:

CSS:

설명:

이 솔루션은 CSS 테이블을 활용하여 다음을 달성합니다. 전체 높이 효과. .container 요소는 표시: 테이블로 설정되고 .row 요소는 표시: table-row로 설정됩니다. 열 요소(.col-md-3 및 .col-md-9)는 표시: 테이블 셀 및 부동: 없음으로 설정되어 기본 부동 동작을 제거합니다.

반응형 조정

반응형 동작을 보장하기 위해 특정 중단점에 대한 CSS를 수정할 수 있습니다. 예를 들어 미디어 쿼리를 사용하여 중간 화면 너비 이상에 대한 테이블 표시 속성만 적용할 수 있습니다.

사용자 정의 클래스:

네이티브 부트스트랩 열 수정을 방지하려면 클래스의 경우 마크업에 사용자 정의 클래스(부동 없음)를 사용하고 해당 클래스에만 CSS 테이블 스타일을 적용합니다.

고려사항:

• 1:3 비율은 CSS에 하드코딩되어 있습니다. 다른 비율의 경우 패딩을 조정해야 합니다.
• 모든 화면 크기의 전체 높이 열의 경우 마크업에서 부트스트랩 열 클래스를 제거하세요.

위 내용은 Bootstrap 3에서 전체 높이 2열 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!