Des lignes imbriquées avec un système de grille bootstrap?

200

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

Exemple de la figure 1

Ma première pensée était de tout ranger 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 possible ou je ne le fais tout simplement pas correctement?

— Greg
source

Veuillez publier le HTML / CSS que vous avez essayé jusqu'à présent.

— Steve Sanders

Essayez ceci: jsfiddle.net/KXje2/9 J'ai édité mon violon pour l'adapter aux grands écrans à très petits.

— BuddhistBeast

Le code ci-dessus a-t-il fonctionné pour vous? ...

— BuddhistBeast

306

Bootstrap version 3.x

Comme toujours, lisez l'excellente documentation de Bootstrap:

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

Assurez-vous que la ligne du niveau parent se trouve à l'intérieur d'un .containerélément. Chaque fois que vous souhaitez imbriquer des lignes, ouvrez simplement un nouvel .rowintérieur de votre colonne.

Voici une mise en page simple à partir de laquelle travailler:

<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 Docs : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Voici une version mise à jour pour 4.0, mais vous devriez vraiment lire toute la section de la documentation sur la grille afin de comprendre comment tirer parti de cette fonctionnalité puissante

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

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

capture d'écran

— KyleMit
source

désolé de détourner un fil de 1 an, mais savez-vous comment obtenir 0px entre l'image et 1 et 3

— alex

@alex, bien sûr - il suffit de définir margin: 0;l' .mini-boxélément. Mon exemple consistait simplement à en ajouter un pour plus de clarté, mais vous pouvez simplement supprimer la ligne complètement. Voici une démo

— KyleMit

pourquoi n'y a-t-il pas de ligne entre col pour minibox 2 et col pour minibox 3? et que se passera-t-il s'il y en a?

— pashute

@pashute, voir la grille Bootstrap 3, le nombre de colonnes dans une ligne est-il vraiment important? . Chaque mini-boîte occupe 50% de l'espace disponible (contraint par la colonne) donc deux occuperont la première ligne. Tous les autres seront simplement intégrés dans une nouvelle ligne. Vous pouvez également associer chacun d'eux en lignes, mais ce n'est pas nécessaire. Bootstrap encapsule par défaut pour que vous n'ayez pas à encombrer votre balisage avec de nouvelles lignes. Si c'est sémantiquement significatif, je dirais d'y aller. Mais si vous affichez simplement une liste de 4 objets, conservez-les dans la même ligne.

— KyleMit

@ user3921890, c'est un sujet trop gros pour y répondre dans une ligne de commentaire. Pouvez-vous publier un nouveau fil expliquant ce que vous essayez de faire et au moins une tentative de le faire, puis créer un lien vers cela ici.

— KyleMit

En plus de ce que @KyleMit a dit, pensez à utiliser:

col-md-* classes pour les plus grandes colonnes extérieures
col-xs-* classes pour les petites colonnes internes

Cela sera utile lorsque vous affichez la page sur différentes tailles d'écran.

Sur un petit écran, l'enroulement des colonnes extérieures plus grandes se produira alors tout en conservant les colonnes intérieures plus petites, si possible

— ezzadeen
source