사용자 정의 CSS를 사용하여 Bootstrap 3에서 전체 높이 열을 만드는 방법은 무엇입니까?

Bootstrap 3개의 전체 높이 열: 사용자 정의 CSS 솔루션

소개:

만들기 Twitter Bootstrap 3을 사용한 전체 높이 레이아웃은 어려울 수 있습니다. Bootstrap의 기본 클래스는 이 기능을 지원하지 않지만 사용자 정의 CSS를 사용하여 이 효과를 얻을 수 있습니다.

사용자 정의 CSS 접근 방식:

1. 설정 100% 높이:
   본문, 컨테이너, 행 요소의 높이를 100%로 설정하여 뷰포트의 전체 높이에 걸쳐 있는지 확인하세요.
2. 테이블로 표시:
   디스플레이: 테이블을 사용하여 컨테이너 요소를 테이블로 변환합니다. 이를 통해 컨테이너의 콘텐츠를 테이블 형식 구조로 정렬할 수 있습니다.
3. 플로팅 셀:
   탐색 열에 no-float와 같은 사용자 정의 클래스를 추가합니다. 이 클래스가 디스플레이: 테이블 셀 및 부동: 없음을 갖도록 설정합니다. 이렇게 하면 탐색 열이 떠다니는 것을 방지하고 콘텐츠 열과 수직으로 정렬할 수 있습니다.

마크업:

<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; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

장점 및 고려 사항:

• 이 사용자 정의 CSS 솔루션은 Bootstrap 3과 호환되는 전체 높이 레이아웃을 제공합니다.
• 내비게이션과 콘텐츠의 1:3 비율은 다음을 통해 조정할 수 있습니다. CSS에서 열 너비를 수정합니다.
• 그러나 사용자 정의 클래스(예: no-float)를 사용하는 것이 중요합니다. 충돌을 피하기 위해 Bootstrap의 기본 열 클래스를 수정하는 대신

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