Twitter Bootstrap을 사용하여 고정 유동 레이아웃을 만드는 방법은 무엇입니까?

Twitter Bootstrap을 사용하여 2열 고정 유동 레이아웃 만들기

소개

유동 너비 열과 고정 너비 열이 있는 레이아웃은 다음의 일반적인 요구 사항입니다. 반응형 웹 디자인. 이 레이아웃 스타일을 사용하면 다양한 화면 크기에 맞게 조정되는 유연한 콘텐츠 영역과 함께 고정 사이드바 또는 탐색 패널을 사용할 수 있습니다. Twitter Bootstrap을 사용하면 이를 달성할 수 있습니다. 레이아웃.

구현

HTML

<div class="container-fluid fill">
  <div class="row-fluid">
    <div class="fixed">
      ...
    </div>
    <div class="filler">
      ...
    </div>
  </div>
</div>

CSS

.fixed {
  width: 150px;
  float: left;
}

.fixed + div {
  margin-left: 150px;  
  overflow: hidden;
}

.fill { 
  min-height: 100%;
  position: relative;
}

.filler::after {
  background-color:inherit;
  bottom: 0;
  content: "";
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: inherit;
  z-index: -1;  
}

설명

• Container-fluid 클래스는 전체 뷰포트를 채우는 유동 레이아웃을 생성합니다.
• row-fluid 클래스는 하위 요소가 사용 가능한 너비를 채우도록 보장합니다.
• .fixed 클래스는 사이드바의 너비를 설정합니다. 고정된 값(예: 150px)으로 설정합니다.
• .fixed 형제 요소의 margin-left 속성은 콘텐츠 영역이 사이드바 뒤에서 시작합니다.
• fill 클래스는 컨테이너 유체 요소의 최소 높이를 100%로 설정하여 사이드바와 콘텐츠 영역의 높이가 동일하도록 보장합니다.
• .filler 요소는 ::after 의사 선택기에 의해 생성된 이 파일은 .filler div를 오버레이하고 두 열의 높이가 같은 느낌을 줍니다.

위 내용은 Twitter Bootstrap을 사용하여 고정 유동 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!