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

Bootstrap 3 2열 전체 높이 최적화

Bootstrap 3에서는 2열로 전체 높이 레이아웃을 만드는 것이 어려울 수 있습니다. 기본 클래스는 기본적으로 이를 지원하지 않습니다. 그러나 사용자 정의 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;
}

이 CSS는 CSS 테이블을 활용하여 전체 높이 열을 생성합니다. '.no-float' 클래스는 Bootstrap의 float 기반 레이아웃으로 인한 열 붕괴를 방지합니다.

추가 고려 사항:

• 1:3을 유지하려면 중간 화면 너비 이상의 경우 '.col-md-3' 및 '.col-md-9'를 사용하세요. 클래스.
• 이 비율이 모든 화면 너비에 필요한 경우 부적절한 사용을 피하기 위해 Bootstrap 열 클래스를 제거하는 것이 좋습니다.
• 작은 화면은 기본적으로 일반 Bootstrap 열 동작으로 설정되며 각 열은 전체 공간을 차지합니다. 너비.

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