2列の中に全幅の背景色を作る（Bootstrap3）

Question

数週間前、私はブートストラップに関するプロジェクトを持っていました。 コードとイメージ（paint mad skillz）に見られるデザイン（.psd）は、既にコンテナの内側にあった2つの列のうちの1つの内側の背景色を必要とします。

Image

<div class="container"> 
<div class="col-xs-3"> 
     <div class="left-menu"> 
      *content* 
     </div> 
    </div> 
    <div class="col-xs-9"> 
     <div class="content"> 
      <div class="text"> 
       *bla-bla-bla* 
      </div> 
      <div class="full-width-background-color"> 
       *content* 
      </div> 
     </div> 
    </div> 
</div> 

Iは、別々の容器に右側の左メニュー+片と灰色の背景ブロックを製造マージン底を追加することによってそれを解決した：-100％を左側のメニューおよびCOL-XSを添加-offset-3を各右側の部分に適用します。

.left-menu { 
margin-bottom: -100%; 
} 

<div class="container"> 
    <div class="col-xs-3"> 
     <div class="left-menu"> 
      *content* 
     </div> 
    </div> 
    <div class="col-xs-9 col-xs-offset-3"> 
     <div class="content"> 
      <div class="text"> 
       *bla-bla-bla* 
      </div> 
     </div> 
    </div> 
</div> 

<div class="full-width-background-color"> 
    <div class="container"> 
     <div class="col-xs-9 col-xs-offset-3"> 
      *content* 
     </div> 
    </div> 
</div> 

このような状況を処理する方法は適切ではありません。このタスクを実行する最も正しい方法は何でしょうか？

Answer 1

これは私がそれを行うだろうかです：

[relative] { 
 
    position: relative; 
 
} 
 

 
[relative] .col-xs-9 { 
 
    position: static; 
 
} 
 

 
[absolute] { 
 
    left: 0; 
 
    width: 100%; 
 
    min-height: inherit; 
 
    position: absolute; 
 
    background-color: gainsboro; 
 
    z-index: -1; 
 
} 
 

 
/* you don't need what's below, it's only for SO, as you didn't add yours */ 
 

 
.left-menu { 
 
    background-color: green; 
 
    min-height: 80vh; 
 
} 
 

 
.content>* { 
 
    min-height: 30vh; 
 
    margin: 5vh 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container-fluid" relative> 
 
    <div class="container"> 
 
    <div class="col-xs-3"> 
 
     <div class="left-menu"> 
 
     *content* 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-9"> 
 
     <div class="content"> 
 
     <div class="text"> 
 
      *bla-bla-bla* 
 
     </div> 
 
     <div class="full-width-background-color"> 
 
      <div absolute></div> 
 
      *content* 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>