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

Bootstrap 3 2열 전체 높이: 종합 가이드

소개
Bootstrap 3에서 전체 높이 열 레이아웃을 구현하는 방법은 다음과 같습니다. 문제는 네이티브 클래스가 이 기능을 지원하지 않기 때문입니다. 이 문서에서는 사용자 정의 CSS를 활용하여 1:3 비율의 전체 높이 열을 생성하여 두 열이 모두 뷰포트의 전체 높이를 확장하는 레이아웃의 요구 사항을 충족하는 솔루션을 살펴봅니다.

HTML 마크업
이 레이아웃의 HTML 구조는 헤더, 컨테이너, 행 및 두 개로 구성됩니다. 열.

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

CSS 스타일
전체 높이 열을 구현하기 위해 우리는 display: table; CSS 테이블을 생성하는 속성을 사용하여 두 열이 모두 뷰포트의 전체 높이를 확장하도록 합니다.

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

설명
CSS 스타일은 다음을 정의합니다.

• html, body 및 .container는 height: 100%로 설정됩니다. 콘텐츠가 전체 뷰포트를 채우도록 합니다.
• .container는 display: table; CSS 테이블을 생성합니다.
• .row는 CSS 테이블 내에 행을 생성하기 위해 표시 속성을 table-row로 설정합니다.
• .row .no-float는 display: table-cell을 다음으로 설정합니다. 열이 행 내의 테이블 셀처럼 동작하도록 만듭니다.
• float: none은 Bootstrap의 기본 부동 동작을 재정의합니다. columns.

사용자 정의

• .container의 margin-top 값을 편집하여 헤더의 상단 여백을 조정합니다.
• 수정 .container의 패딩 값을 사용하여 왼쪽/오른쪽 간격을 설정합니다. 열.
• 열에서 col-md-* 클래스를 제거하여 모든 화면 너비에 걸쳐 고정된 1:3 비율을 만듭니다.

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