Wie erstelle ich mit Bootstrap Spalten in voller Breite und unterschiedlichen Hintergrundfarben?

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

Um dieses Layout zu erreichen, müssen wir eine Kombination von Containern verwenden mit verschiedenen Hintergrundfarben und absoluter Positionierung.

Bootstrap 5

Option 1: Pseudo-Element-Ansatz

• Erstellen Sie einen Wrapper-Container mit Containerflüssigkeit, um das gesamte Ansichtsfenster auszufüllen.
• Verwenden Sie ein Pseudoelement für die Spalte(n) mit absoluter Positionierung, um die Illusion eines Containers innerhalb einer zu erzeugen Container-Fluid.

Option 2: Nested-Grid-Ansatz

• Container-Fluid als Hauptbehälter verwenden.
• Nest kleinere Rasterspalten innerhalb der äußeren Spalten, jede mit ihrer eigenen Hintergrundfarbe.

Bootstrap 4 und 3

• Erstellen Sie einen Wrapper-Container mit Container.
• Erstellen Sie innerhalb des Wrappers einen weiteren Container mit der gewünschten Hintergrundfarbe.
• Anpassen die Ränder und die Polsterung, um das gewünschte Layout zu erreichen.

Zusätzliche Option: Pseudoelement Technik

Alternativ können Sie mit einem Pseudoelement einen farbigen Hintergrund erzeugen, der bis zum Bildschirmrand reicht. Zum Beispiel:

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

Diese Technik bietet einen flexibleren Ansatz zum Erstellen farbiger Bereiche, die bis zum Bildschirmrand reichen, erfordert jedoch eine sorgfältige Überlegung bei der Positionierung, um überlappende Inhalte zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Bootstrap Spalten in voller Breite und unterschiedlichen Hintergrundfarben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!