Twitter Bootstrap을 사용하여 고정 너비 사이드바와 유동 너비 기본 콘텐츠 영역이 있는 2열 레이아웃을 만들 수 있습니까?

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

이 기사에서는 다음이 가능한지 알아보겠습니다. Twitter Bootstrap을 사용하여 고정 너비 사이드바와 유동 너비 기본 콘텐츠 영역을 갖춘 2열 레이아웃을 구현합니다. 귀하의 개발에 도움이 되는 포괄적인 설명과 솔루션을 제공해 드리겠습니다.

Twitter Bootstrap으로 가능합니까?

Twitter Bootstrap은 처음에 ".container-fluid" 클래스. 그러나 버전 2.0이 출시되면서 이 기능이 제거되었습니다. 따라서 표준 부트스트랩 클래스만으로는 고정유체 레이아웃을 구현하는 것이 불가능합니다.

해결책

1. 고정 유동 레이아웃

수정된 HTML과 HTML의 조합을 사용하여 고정 유동 레이아웃을 구현할 수 있습니다. CSS:

HTML:

<div>

CSS:

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

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

html, body {
    height: 100%;
}

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

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

2. 동일한 열 높이(선택 사항)

사이드 바와 콘텐츠의 높이를 동일하게 하려면 영역:

HTML:

<div>

참고:

• 사이드바를 필러 요소로 만들려면, CSS에서 "right: 0"을 "left: 0"으로 변경하세요.

위 내용은 Twitter Bootstrap을 사용하여 고정 너비 사이드바와 유동 너비 기본 콘텐츠 영역이 있는 2열 레이아웃을 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!