Wie erstelle ich zwei Vollbild-Hintergrundspalten mit Bootstrap-Box-Inhalten?

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

Das Problem verstehen

Das Ziel ist die Erstellung ein Webseitenlayout mit zwei Spalten mit unterschiedlichen Hintergrundfarben, die bis zu den Bildschirmrändern reichen und gleichzeitig sicherstellen, dass der Inhalt in den Spalten innerhalb der definierten Bootstrap-Box bleibt width.

Bootstrap 3-Lösung

Der empfohlene Ansatz in Bootstrap 3 besteht darin, einen weiteren Wrapper-DIV um einen zweiten Container zu verwenden. Dadurch kann der zweite Container die Breite des äußersten Wrappers erben, während die Hintergrundfarbe des Wrappers bis zu den Bildschirmrändern reichen kann.

<div class="container">

Bootstrap 4 und 5-Lösung

In Bootstrap 4 und 5 besteht die bevorzugte Methode darin, die Container-Fluid-Klasse zu verwenden und kleinere Gitterspalten in den äußeren Spalten zu verschachteln, um das gewünschte Ergebnis zu erzielen Effekt.

<!-- Bootstrap 5 -->
<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 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>

Zusätzliche Optionen

Eine andere Möglichkeit, einen ähnlichen Effekt zu erzielen, besteht darin, ein Pseudoelement wie .right:before zu verwenden, um das Erscheinungsbild zu erstellen eines farbigen Hintergrunds, der über die Containerbreite hinausgeht.

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

Diese Methode kann auch auf Bootstrap 3 und höher angewendet werden Versionen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich zwei Vollbild-Hintergrundspalten mit Bootstrap-Box-Inhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!