Comment créer des colonnes pleine largeur avec différentes couleurs d'arrière-plan à l'aide de Bootstrap ?

Comment créer des colonnes avec différentes couleurs d'arrière-plan qui s'étendent jusqu'au bord de l'écran

Pour réaliser cette disposition, nous devons utiliser une combinaison de conteneurs avec différentes couleurs de fond et un positionnement absolu.

Bootstrap 5

Option 1 : Approche des pseudo-éléments

• Créez un conteneur d'emballage avec du fluide de conteneur pour remplir toute la fenêtre d'affichage.
• Utilisez un pseudo élément sur la ou les colonnes avec un positionnement absolu pour créer l'illusion d'un conteneur au sein d'un conteneur-fluide.

Option 2 : approche de grille imbriquée

• Utiliser le conteneur-fluide comme conteneur principal.
• Nest des colonnes de grille plus petites à l'intérieur des colonnes extérieures, chacune avec son propre arrière-plan couleur.

Bootstrap 4 et 3

• Créez un conteneur wrapper avec le conteneur.
• À l'intérieur du wrapper, créez un autre conteneur avec la couleur d'arrière-plan définie comme vous le souhaitez.
• Ajustez les marges et le remplissage pour obtenir l'effet souhaité. mise en page.

Option supplémentaire : technique de pseudo-élément

Vous pouvez également utiliser un pseudo-élément pour créer un arrière-plan coloré qui s'étend jusqu'au bord de l'écran. Par exemple :

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

Cette technique offre une approche plus flexible pour créer des régions colorées qui s'étendent jusqu'au bord de l'écran, mais elle nécessite un examen attentif du positionnement pour éviter le chevauchement du contenu.

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!