Comment faire en sorte que les éléments Bootstrap s'étendent au-delà des limites des conteneurs ?

Extension d'élément au-delà des limites du conteneur dans Bootstrap

Dans Bootstrap, la classe conteneur dicte la largeur de la zone de contenu. Cependant, certaines conceptions peuvent nécessiter des éléments dépassant ce conteneur. Voici comment y parvenir :

Utilisation d'un pseudo-élément CSS

Créez un pseudo élément ::before CSS dans l'élément débordant. Il sera redimensionné en hauteur avec le div débordant.

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

Exemple :

<div class="container">
    <div class="row">
        <div class="col-lg-6 left">
            ...
        </div>
    </div>
</div>

Utilisation d'un conteneur à positionnement absolu

Positionnez un . conteneur-fluide (pleine largeur) derrière le conteneur de contenu. Il agira comme un « fantôme » qui s'étend au-delà des frontières.

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

Exemple :

<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>

Demandes similaires :

• Obtenez deux colonnes avec des couleurs d'arrière-plan différentes qui s'étendent jusqu'au bord de l'écran
• Exemple avec image right
• Exemple avec image left
• Étendre un élément au-delà du conteneur bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!