Bootstrap 3에서 전체 높이 2열 레이아웃을 어떻게 만들 수 있나요?

Bootstrap 3에서 전체 높이 2열 레이아웃 달성

Bootstrap 3에서는 전체 높이 열 레이아웃에 대한 기본 지원이 부족합니다. 그러나 사용자 정의 CSS를 사용하고 CSS 테이블을 활용하면 이 기능을 복제할 수 있습니다.

마크업

<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

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

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

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

설명

이 코드는 중간 화면 너비 이상에서 전체 높이 열과 1:3 비율(탐색:콘텐츠)을 달성합니다. . 사용자 정의 CSS 클래스(no-float)는 열이 부동하는 것을 방지하고 테이블 셀로 표시되도록 하기 위해 활용됩니다.

고려 사항

• Bootstrap의 기본 열 응답성을 위해 클래스(col-md-3, col-md-9)가 사용됩니다.
• 작은 화면(중형 이하)에서는 열이 기본 부트스트랩 동작(각 열이 100% 너비를 차지)으로 되돌아갑니다.
• 모든 화면 너비에 1:3 비율이 필요한 경우 부트스트랩의 열 클래스를 마크업.

위 내용은 Bootstrap 3에서 전체 높이 2열 레이아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!