Wie erweitert man eine Bootstrap-Zeile über ihren Container hinaus?

Erweitern der Bootstrap-Zeile über den Container hinaus

Problembeschreibung

Das Rastersystem von Bootstrap bietet eine praktische Möglichkeit, responsive Layouts zu erstellen. In einigen Fällen kann es jedoch vorkommen, dass ein Element über die Breite des Containers hinausragen muss. Dies kann beim Erreichen des gewünschten Designs zu Herausforderungen führen.

Lösung

Option 1: CSS-Pseudoelement verwenden

Erstellen Sie ein Pseudo-:before-Element mit ein negativer linker Versatz, der über die Breite des Containers hinausgeht. Dieses Element fungiert als Abstandshalter, der das Zielelement über den Behälter hinausschiebt.

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

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

Option 2: Verwendung eines absolut positionierten Behälters

Verwenden Sie eine Behälterflüssigkeit mit absolute Positionierung, die sich bis zu den Bildschirmrändern hinter dem Primärcontainer erstreckt und als „Geister“-Container fungiert.

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

Zusätzlich Ressourcen

• [Codeply-Demonstration (Option 1)](http://codeply.com/go/C80RYwhWrc)
• [Codeply-Demonstration (Option 2)](https:// codeply.com/go/txUHH72f16)
• [Verwandtes Beispiel: Erhalten Sie zwei Spalten mit unterschiedlichen Hintergrundfarben, die sich bis zum Bildschirm erstrecken Kante](https://stackoverflow.com/a/35627548)

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