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

Twitter Bootstrap을 사용하여 고정 유동 2열 레이아웃을 구현하는 방법

배경

하나의 고정 너비로 ​​2열 레이아웃 만들기 열과 하나의 유동 폭 열이 일반적인 디자인 패턴입니다. 이전 버전의 Twitter Bootstrap에서는 .container-fluid 클래스를 사용하여 이를 허용했지만 Bootstrap 2.0 이상에서는 더 이상 지원되지 않습니다.

해결책

이 문제를 해결하기 위해 다음의 조합을 사용할 수 있습니다. CSS 및 약간 수정된 HTML 코드:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">...Fixed Column...</div>
        <div class="hero-unit filler">...Fluid Column...</div>
    </div>
</div>

CSS

/* Fixed-Fluid Layout CSS */

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

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

/* Content Height Equalization CSS (optional) */

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;  
}

참고

• .fixed 너비를 원하는 고정 열 크기로 조정하세요.
• 왼쪽에 유체 열을 표시하려면 오른쪽: 0을 왼쪽: 0으로 바꾸세요. .filler CSS에 있습니다.
• 추가 CSS는 선택 사항이지만 고정 열과 유동 열의 높이가 동일하도록 보장합니다.

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