Comment créer deux colonnes d'arrière-plan en plein écran avec du contenu en boîte Bootstrap ?

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

Comprendre le problème

L'objectif est de créer une mise en page de page Web avec deux colonnes qui ont des couleurs d'arrière-plan différentes s'étendant jusqu'aux bords de l'écran tout en garantissant que le contenu des colonnes reste dans la boîte d'amorçage définie width.

Solution Bootstrap 3

L'approche recommandée dans Bootstrap 3 consiste à utiliser un autre wrapper DIV autour d'un deuxième conteneur. Cela permet au deuxième conteneur d'hériter de la largeur du wrapper le plus externe tandis que la couleur d'arrière-plan du wrapper peut s'étendre jusqu'aux bords de l'écran.

<div class="container">

Solution Bootstrap 4 et 5

Dans Bootstrap 4 et 5, la méthode préférée consiste à utiliser la classe conteneur-fluide ainsi qu'à imbriquer des colonnes de grille plus petites dans les colonnes externes pour obtenir l'objectif souhaité. effet.

<!-- Bootstrap 5 -->
<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 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>

Options supplémentaires

Une autre façon d'obtenir un effet similaire consiste à utiliser un pseudo-élément, tel que .right:before, pour créer l'apparence d'un arrière-plan coloré s'étendant au-delà de la largeur du conteneur.

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

Cette méthode peut également être appliquée à Bootstrap 3 et aux versions ultérieures.

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!