Bootstrap, brechen eine Spalte aus dem Container

Question

Ich möchte zwei col-*-6 in einem .row. Die linke col hat eine background-color, die bis zum linken Rand des Bildschirms gehen muss. Auch gibt es Text im ersten col, der mit dem normalen .container mit ausgerichtet werden muss. Die rechte col hat eine background-image, die bis zum rechten Rand des Bildschirms gehen muss.

here is a image example of I want to achieve. Dies ist der aktuelle Code, den ich habe, ohne alle unnötigen Elemente:

<div class="container-fluid"> 
    <div class="row no-gutter"> 
    <div class="col-md-6 text"> 
     <h2>Lorem ipsum dolor sit amet, consectetur elit, sed do lorem ipsum.</h2> 
    </div> <!-- close col-md-6 text --> 
    <div class="col-md-6 image" id="slided01"> 
    </div> <!-- close col-md-6 image --> 
    </div> <!-- close row --> 
</div><!-- close container-fluid --> 

Das Problem mit dem obigen Code ist, dass der Text auf der linken Seite des Bildschirms ausgerichtet ist, wegen die .container-fluid. Und ich möchte, dass der Text mit der normalen Breite .container ausgerichtet wird.

Hier ist die JsFiddle. Die erste Zeile ist wie ich den Hintergrund haben möchte, die zweite Zeile ist wie ich den Text haben möchte.

Answer 1

Sie könnten die container-fluid unter container absolut positionieren und CSS verwenden, um die Höhe beider Container gleich zu halten.

.abs { 
    position: absolute; 
    top: 0; 
    left:0; 
    z-index:-1; 
    bottom:0; 
    right:0; 
    min-height:100%; 
} 

http://www.codeply.com/go/pLKx5nEZF6