Comment créer des mises en page plein écran à deux colonnes avec différentes couleurs d'arrière-plan à l'aide de Bootstrap ?

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

Problème :

Vous souhaitez créer deux colonnes sur une page Web, chacune avec une couleur de fond distincte, s'étendant jusqu'aux bords de l'écran. Cependant, le contenu des colonnes doit rester dans la largeur fixe du système de grille Bootstrap.

Solution :

Utilisation de Bootstrap 5 Beta :

Le concept reste similaire dans Bootstrap 5 :

• Utiliser un pseudo-élément avec une position absolue sur la ou les colonnes pour créer l'illusion d'un conteneur au sein d'un conteneur-fluide.

Exemple pour Bootstrap 5 Beta :

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Alternative pour Bootstrap 5 :

• Utilisez le fluide du conteneur et insérez des colonnes de grille plus petites dans les colonnes extérieures, chacune avec sa couleur d'arrière-plan.

Utilisation de Bootstrap 4 :

Le concept s'apparente à Bootstrap 5, mais sans le "-xs-" infixe.

Exemple pour Bootstrap 4 :

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Utilisation de Bootstrap 3 :

Enveloppez un deuxième conteneur dans un autre wrapper DIV :

<div class="container">

Utilisation d'un Pseudo-élément dans Bootstrap 3 :

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

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!