Machen Sie volle Breite Hintergrundfarbe in zwei Spalten (Bootstrap3)

Question

Vor ein paar Wochen hatte ich ein Projekt auf Bootstrap. Design (.psd), wie in Code und Bild (Farbe mad skillz) gesehen, benötigt Hintergrundfarbe in voller Breite ("Container-Fluid" -ähnlich) innerhalb einer der beiden Spalten, die bereits im Container waren.

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 gelöst, indem es linken Menü + Stück rechten Teil und grauen Hintergrund Block in getrennten Behältern, Zugabe von margin-bottom: -100% bis linken Menü und das Hinzufügen von col-xs -offset-3 zu jedem rechten Teil.

.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> 

Ich glaube nicht, dass es richtig ist, solche Situationen zu behandeln. Was wäre der richtige Weg, um diese Aufgabe zu erfüllen?

Answer 1

Dies ist, wie ich es tun würde:

[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>