Comment étendre une ligne Bootstrap au-delà de son conteneur ?

Extension de la ligne Bootstrap au-delà du conteneur

Description du problème

Le système de grille de Bootstrap offre un moyen pratique de créer des mises en page réactives. Cependant, dans certains cas, vous pouvez rencontrer des situations dans lesquelles vous avez besoin qu'un élément s'étende au-delà de la largeur du conteneur. Cela peut présenter des difficultés pour obtenir le design souhaité.

Solution

Option 1 : Utiliser un pseudo-élément CSS

Créer un pseudo ::élément avant avec un décalage gauche négatif s'étendant au-delà de la largeur du conteneur. Cet élément agira comme un espaceur qui pousse l'élément cible au-delà du conteneur.

#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 : Utiliser un conteneur à positionnement absolu

Utilisez un conteneur-fluide avec positionnement absolu qui s'étend jusqu'aux bords de l'écran derrière le conteneur principal agissant comme un conteneur "fantôme".

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

Supplémentaire Ressources

• [Démonstration Codeply (option 1)](http://codeply.com/go/C80RYwhWrc)
• [Démonstration Codeply (option 2)](https:// codeply.com/go/txUHH72f16)
• [Exemple associé : obtenez deux colonnes avec un arrière-plan différent Couleurs qui s'étendent jusqu'au bord de l'écran](https://stackoverflow.com/a/35627548)

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!