Wie kann man Hintergrundfarben in Bootstrap-Spalten erweitern und gleichzeitig die Boxbreite beibehalten?

Hintergrundfarben mit Bootstrap erweitern

Das Erstellen einer Website mit Spalten mit unterschiedlichen Hintergrundfarben kann mit Bootstrap erreicht werden. Bei der Implementierung dieser Funktion muss jedoch unbedingt sichergestellt werden, dass der Inhalt innerhalb der definierten Bootstrap-Box-Breite bleibt, insbesondere auf größeren Bildschirmen.

Bootstrap 5:

In Bootstrap 5. Verwenden Sie ein Pseudoelement, das absolut auf der Spalte mit der gewünschten Hintergrundfarbe positioniert ist:

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

Bootstrap 3:

Verwenden Sie in Bootstrap 3 einen zusätzlichen Wrapper-DIV um einen zweiten Container:

<div class="container">

Beispiel mit einem Pseudoelement:

Für Bootstrap 3 können Sie den gewünschten Effekt auch über ein Pseudoelement erzeugen:

.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

Das obige ist der detaillierte Inhalt vonWie kann man Hintergrundfarben in Bootstrap-Spalten erweitern und gleichzeitig die Boxbreite beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!