web-dev-qa-db-fra.com

Lignes imbriquées avec le système de grille bootstrap?

Je veux une image plus grande avec 4 images plus petites dans un format 2x2 comme ceci:

Figure 1 Example

Ma pensée initiale était de tout loger dans une rangée. Créez ensuite deux colonnes et, dans la deuxième colonne, créez deux lignes et deux colonnes pour créer l'effet 1x1 et 2x2.

Cependant, cela ne semble pas être possible, ou je ne le fais pas correctement?

csshtml5twitter-bootstrapgridgrid-system
178
Greg

Bootstrap Version 3.x

Comme toujours, lisez l'excellente documentation de Bootstrap:

Documents 3.x : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Assurez-vous que la ligne de niveau parent est à l'intérieur d'un élément .container. Chaque fois que vous souhaitez imbriquer des lignes, ouvrez simplement un nouveau .row à l'intérieur de votre colonne.

Voici une mise en page simple à partir de laquelle:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap Version 4.0

4.0 Documents : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Voici une version mise à jour pour la version 4.0, mais vous devriez vraiment lire toute la section docs de la grille pour comprendre comment utiliser cette puissante fonctionnalité.

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Démo dans Fiddle jsFiddle 3.x | jsFiddle 4.

Ce qui ressemblera à ceci ( avec un peu de style ajouté ):

screenshot

277
KyleMit

Ajoutant à ce que @KyleMit a dit:

  • pensez à utiliser les classes col-md-* pour les grands
  • colonnes extérieures et col-xs-* classes pour les plus petites
  • colonnes intérieures

Cela sera utile lorsque vous visualiserez la page sur différentes tailles d'écran. Sur un petit écran, utilisez:

  • l'emballage de plus grande
  • les colonnes extérieures se produiront alors tout en maintenant le plus petit
  • colonnes intérieures si possible
4
ezzadeen