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

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

Susan Sarandon
Libérer: 2024-12-01 07:27:10
original
248 Les gens l'ont consulté

How to Create Two Full-Screen Background Columns with Bootstrap Boxed Content?

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">
Copier après la connexion

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>
Copier après la connexion

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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal