전체 페이지 섹션 CSS

Question

나는 첫 번째 웹 사이트/프리랜서 프로젝트에서 일하고 있습니다. 나는 html/css 루비 레일과 부트 스트랩에 대한 지식을 지금까지 가지고있다.

나는 당신이 내가 볼 수 있었던 무언가로 나를 도울 수 있는지 궁금해하고 있었다. 페이지의 특정 부분을 브라우저 창의 전체 부분으로 가져 오는 방법을 찾으려고 노력했습니다. 내가 작업하고있는 사이트는 1 개의 긴 페이지로 4 개의 섹션으로 구성되어 있으며 각각은 전체 브라우저의 관점을 취해야합니다. 이 작업을 수행하는 부트 스트랩이있는 쉬운 방법이 있는지 궁금합니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

유체 그리드 (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem)를 사용하고 같은 당신의 컨테이너 div에 100 % 폭을 추가

CSS :

<style type="text/css"> 
    /* after your bootstrap css inclusing */  
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container 
    { 
    width: 100%; 
    } 

    </style> 

HTML :

<div class="container"> 
<div class="row-fluid"> 
    <div class="span4" style="background-color:red;">...</div> 
    <div class="span8" style="background-color:yellow;">...</div> 
</div> 
</div> 

갱신 : 50 % 높이의 행으로 분할 :

CSS :

<style type="text/css"> 
    /* after your bootstrap css inclusing */  
    body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;} 
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container 
    { 
    width: 100%; 
    } 
    .fifty {height:50%;min-height:50%;} 
    </style> 

HTML :

<div class="container"> 
<div class="row-fluid fifty"> 
    <div class="span6 hunderd" style="background-color:red;">...</div> 
    <div class="span6 hunderd" style="background-color:yellow;">...</div> 
</div> 
<div class="row-fluid fifty"> 
    <div class="span6 hunderd" style="background-color:blue;">...</div> 
    <div class="span6 hunderd" style="background-color:orange;">...</div> 
</div> 
</div>