Wie erstelle ich mit Bootstrap zweispaltige Vollbildlayouts mit unterschiedlichen Hintergrundfarben?

So erstellen Sie zwei Spalten mit unterschiedlichen Hintergrundfarben, die bis zum Bildschirmrand reichen

Problem:

Sie möchten auf einer Webseite zwei Spalten mit jeweils einer eigenen Hintergrundfarbe erstellen, die bis zu den Bildschirmrändern reichen. Der Inhalt der Spalten sollte jedoch innerhalb der festen Breite des Bootstrap-Rastersystems bleiben.

Lösung:

Verwendung von Bootstrap 5 Beta:

Das Konzept bleibt in Bootstrap 5 ähnlich:

• Verwendung ein Pseudoelement mit einer absoluten Position auf der/den Spalte(n), um die Illusion eines Containers innerhalb einer Containerflüssigkeit zu erzeugen.

Beispiel für Bootstrap 5 Beta:

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Alternativ für Bootstrap 5:

• Verwenden Sie Container-Fluid und fügen Sie kleinere Gitterspalten in die äußeren Spalten ein, jede mit ihrer Hintergrundfarbe.

Verwenden von Bootstrap 4:

Das Konzept ähnelt Bootstrap 5, jedoch ohne das „-xs-“ infix.

Beispiel für Bootstrap 4:

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Verwendung von Bootstrap 3:

Wickeln Sie einen zweiten Container in einen anderen Wrapper DIV:

<div class="container">
<p><strong>Verwendung von a Pseudoelement in Bootstrap 3:</strong></p>
<pre class="brush:php;toolbar:false">.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}