Wie kann ich eine Bootstrap-Zeile über ihren Container hinaus erweitern?

Bootstrap-Zeile außerhalb des Containers erweitern

In Bootstrap sind Elemente in Zeilen enthalten, die innerhalb der .container-Klasse definiert sind. Es kann jedoch Fälle geben, in denen Sie die Zeile über den Container hinaus erweitern müssen.

Eine Methode, dies zu erreichen, ist die Verwendung eines CSS-Pseudoelements. Erstellen Sie ein ::before-Element für die linke Spalte (linke Klasse), das ihrer Höhe entspricht. Dieses Element wird nach links erweitert.

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

Ein anderer Ansatz besteht darin, ein absolut positioniertes .container-fluid hinter dem Inhalts-.container zu verwenden. Dieser „Geister“-Container erweitert die Breite der Reihe.

.abs {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

Mit diesen Lösungen können Sie Reihen über den Container hinaus erweitern und so Flexibilität bei Ihren Designs bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Bootstrap-Zeile über ihren Container hinaus erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!