web-dev-qa-db-fra.com

Plusieurs lignes à l'intérieur d'une ligne avec Bootstrap 4

J'essaie de créer une page pleine largeur en utilisant Bootstrap. J'ai une configuration similaire à celle-ci:

<body>
    <div class="container-fluid">
        <div class="row">
            The first row goes here
        </div>
        <div class="row">
            The second row goes here
        </div>
        <div class="row">
            The third row goes here
        </div>
    </div>
</body>

Si je voulais créer une ligne à l'intérieur d'une ligne, comment ferais-je cela? Voici ce que j'essaie de réaliser:

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="row text-center">
                <h1>Some title</h1>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    Grid perhaps
                </div>
                <div class="col-md-4">
                    More grid
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
</body>

Donc, fondamentalement, je veux mettre le titre sur une ligne et des grilles sur une autre ligne. La partie délicate ici est que je veux placer des colonnes de 4 colonnes de large au milieu, puis avoir un "remplissage de 2 colonnes" à gauche et à droite.

Ma question peut ressembler aux autres, mais elle est unique en raison du rembourrage. Comment faire correctement cette mise en page?

htmlcsstwitter-bootstraptwitter-bootstrap-4
6
MortenMoulder

Bootstrap a un système de gouttières intelligent (mais délicat) fournissant un contenu "naturel" (margins + paddings) pour tous les appareils  1 .

Ce système est basé sur deux hypothèses simples:

  • les colonnes sont les enfants immédiats de .rows  2
  • le contenu est placé à l'intérieur des colonnes

C'est pourquoi, si vous souhaitez placer un .row dans un autre .row (pour diviser davantage l'un de vos cols), vous devez utiliser ce balisage:

<div class="row">
  <div class="col-12">
     <div class="row">
        <div class="col-md-4 offset-md-2">
           Grid perhaps
        </div>
        <div class="col-md-4">
           More grid
        </div>
     </div>
  </div>
</div>

Ce qui précède n'a pas beaucoup de sens en soi (vous pouvez simplement utiliser le balisage de la ligne enfant et vous obtiendriez le même résultat). Mais c'est utile lorsque vous souhaitez décaler (ou limiter) une zone entière d'une mise en page, comme ceci:

<div class="row">
  <div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
     <div class="row">
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
     </div>
  </div>
</div>

Voir ce violon pour un exemple en direct.

1 Pour se débarrasser des gouttières de Bootstrap (en v4), il faudrait appliquer no-gutters classe sur .row.

2 C'est un "principe général", pas un "règle stricte". D'autres éléments sont autorisés (et même recommandés) en tant qu'enfants directs de .rows (comme sauts de colonne ). À l'autre extrémité, d'autres éléments s'étendent de .rows (comme .form-rows), héritant ainsi du système de gouttières et étant des parents de colonne valides.

14
tao