如何使用Bootstarp创建两个不相等的列的布局

Question

如何在此图片上创建布局：

我不能使用.container-fluid因为内容有固定的宽度，但我需要将每列的背景颜色扩展到整页宽度，如图所示。

Answer 1

我认为你需要一些解决方法和对Twitter Bootstrap的一些理解。试试这个HTML（Twitter Bootstrap 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 Bootstrap 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>