Heim >Web-Frontend >CSS-Tutorial >Wie lassen sich Bootstrap-Elemente über Containergrenzen hinaus erweitern?

Wie lassen sich Bootstrap-Elemente über Containergrenzen hinaus erweitern?

DDD
DDDOriginal
2024-12-06 00:47:10395Durchsuche

How to Make Bootstrap Elements Extend Beyond Container Boundaries?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn