如何創建有兩個不相等的列布局Bootstarp

Question

如何創建佈局像這樣的畫面：

我不能使用.container-fluid因爲內容有固定的寬度，但我需要每個背景顏色列如圖所示擴展爲整頁寬度。

Answer 1

我認爲你需要一些解決方法和一些你對Twitter Bootstrap的理解。試試這個HTML（Twitter的引導4）：

<div class="container-fluid"> 
    <div class="row nav"> 
    <div class="container">nav</div> 
    </div> 
    <div class="row gradientbody"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-9 gray"><br />col1</div> 
     <div class="col-lg-3 lightgray hidden-md-down"><br />col2</div> 
     </div> 
    </div> 
    </div> 
    <div class="row lightgray hidden-lg-up"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12 lightgray">col2</div> 
     </div> 
    </div> 
    </div> 
</div> 

而這個CSS：

.gray {background: gray;} 
body, .lightgray {background: lightgray;} 
.nav {position: absolute; z-index: 9; background: lime; width: 100%;} 
.gradientbody { 
background: gray; /* Old browsers */ 
background: -moz-linear-gradient(left, gray 50%, lightgray 50%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(left, gray 50%,lightgray 50%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to right, gray 50%,lightgray 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='gray', endColorstr='lightgray',GradientType=1); /* IE6-9 */ 
} 
.gradientbody > div > div > div {height: 100vh;} 
@media screen and (max-width: 992px) { 
    .gradientbody {background: gray!important;} 
    .gradientbody > div > div > div {height: auto;} 
} 

請參閱Codepen：http://codepen.io/anon/pen/ZeoeWx

如果你想使用Twitter的引導3，使用下面的HTML （您可以使用相同的CSS）：

<div class="container-fluid"> 
    <div class="row nav"> 
    <div class="container">nav</div> 
    </div> 
    <div class="row gradientbody"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-9 gray"><br />col1</div> 
     <div class="col-lg-3 lightgray visible-lg"><br />col2</div> 
     </div> 
    </div> 
    </div> 
    <div class="row lightgray hidden-lg"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12 lightgray">col2</div> 
     </div> 
    </div> 
    </div> 
</div>