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:

• Erhalten Sie zwei Spalten mit unterschiedlichen Hintergrundfarben, die bis zum Bildschirmrand reichen
• Beispiel mit Bild rechts
• Beispiel mit Bild links
• Ein Element über den Bootstrap-Container hinaus erweitern

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!