Heim >Web-Frontend >CSS-Tutorial >Wie lassen sich Bootstrap-Elemente über Containergrenzen hinaus erweitern?
Elementerweiterung über Containergrenzen hinaus in Bootstrap
In Bootstrap bestimmt die Containerklasse die Breite des Inhaltsbereichs. Bei bestimmten Designs können jedoch Elemente erforderlich sein, die über diesen Behälter hinausragen. So erreichen Sie dies:
Verwenden eines CSS-Pseudoelements
Erstellen Sie ein CSS-Pseudo-:before-Element innerhalb des überlaufenden Elements. Die Höhe wird zusammen mit dem überlaufenden Div angepasst.
.left:before { left: -999em; background: red; content: ''; display: block; position: absolute; width: 999em; top: 0; bottom: 0; }
Beispiel:
<div class="container"> <div class="row"> <div class="col-lg-6 left"> ... </div> </div> </div>
Verwendung eines absolut positionierten Containers
Positionieren Sie ein . Behälterflüssigkeit (volle Breite) hinter dem Inhaltsbehälter. Es wird wie ein „Geist“ wirken, der über die Grenzen hinausgeht.
.abs { position: absolute; right:0; top:0; bottom:0; z-index: 1; }
Beispiel:
<div class="container"> <div class="row"> <div class="col-sm-6"> <h4>Content</h4> </div> <div class="col-sm-6"> <!-- space over image --> </div> </div> </div> <div class="container-fluid abs"> <div class="row h-100"> <div class="col-sm-6 h-100"> <!-- empty spacer --> </div> <div class="col-sm-6 right"> <img src="image.jpg"> </div> </div> </div>
Ähnliche Anfragen:
Das obige ist der detaillierte Inhalt vonWie lassen sich Bootstrap-Elemente über Containergrenzen hinaus erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!