Twitter Bootstrap에서 고정 너비 사이드바 및 유동 너비 콘텐츠 영역을 어떻게 얻을 수 있습니까?

Twitter Bootstrap으로 고정 유동 레이아웃 구현

Twitter Bootstrap의 인기에도 불구하고 두 개의 레이아웃을 생성하는 능력에 대한 우려가 제기되었습니다. -고정 너비 측면 패널과 유동 너비 콘텐츠를 갖춘 열 레이아웃

가능한 솔루션:

원래 솔루션(Bootstrap v1.0)

수정된 HTML 및 CSS를 사용하면 Bootstrap v1.0에서 고정 유체 레이아웃을 구현할 수 있습니다. 업데이트된 코드는 다음과 같습니다.

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- Fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- Removed spanX class -->
            ...
        </div>
    </div>
</div>

.fixed {
    width: 150px;  /* Fixed width */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width */
    overflow: hidden;
}

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

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

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

업데이트된 솔루션(Bootstrap v2.0)

".container-fluid" 클래스 제거 Twitter Bootstrap v2.0에서는 원래 솔루션이 호환되지 않게 되었습니다. 그러나 CSS를 약간 수정하면 2열 고정 유동 레이아웃을 구현할 수 있습니다.

.fixed {
    width: 150px;  /* Fixed width */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width */
    overflow: hidden;
}

사이드바와 콘텐츠의 동일한 높이 보장

필요하지는 않지만 , 사이드바와 콘텐츠 열의 높이가 동일한지 확인하는 것이 바람직한 경우가 많습니다. 이는 유동 너비 열에 ".filler" 클래스를 추가하고 ::after 의사 선택기를 사용하여 남은 공간을 채우는 것처럼 보이는 필러 요소를 추가함으로써 달성할 수 있습니다.

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    height: 100%;
    left: 150px;  /* Match fixed width */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;  
}

참고:

• 유체-유체 레이아웃의 경우 ".container-fluid"를 최소 높이로 설정합니다. 100%.
• 페이지 왼쪽에 필러 요소를 두려면 "왼쪽: 150px;"로 변경하세요. "오른쪽: 0;"으로.

위 내용은 Twitter Bootstrap에서 고정 너비 사이드바 및 유동 너비 콘텐츠 영역을 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!