Comment étendre les couleurs d'arrière-plan dans les colonnes Bootstrap tout en conservant la largeur du cadre ?

Extension des couleurs d'arrière-plan avec Bootstrap

La création d'un site Web avec des colonnes ayant des couleurs d'arrière-plan différentes peut être réalisée à l'aide de Bootstrap. Cependant, lors de la mise en œuvre de cette fonctionnalité, il est essentiel de s'assurer que le contenu reste dans la largeur de la boîte bootstrap définie, en particulier sur les écrans plus grands.

Bootstrap 5 :

Dans Bootstrap 5, utilisez un pseudo élément positionné de manière absolue sur la colonne avec la couleur de fond souhaitée :

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

Bootstrap 3 :

Dans Bootstrap 3, utilisez un wrapper DIV supplémentaire autour d'un deuxième conteneur :

<div class="container">

Exemple avec un pseudo-élément :

Pour Bootstrap 3, vous pouvez également créer l'effet souhaité à l'aide d'un pseudo élément :

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