Je veux 1 image plus grande avec 4 images plus petites dans un format 2×2 comme ceci:
Ma première pensée é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 1×1 et 2×2.
Cependant, cela ne semble pas possible ou je ne le fais pas correctement?
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 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
intérieur de votre colonne.
Voici un schéma simple à utiliser:
image 1 2 3 4
4.0 Docs : http://getbootstrap.com/docs/4.0/layout/grid/#nesting
Voici une version mise à jour pour la version 4.0, mais vous devriez vraiment lire l’intégralité de la section des documents sur la grid pour comprendre comment tirer parti de cette fonctionnalité puissante.
image 1 2 3 4
Ce qui ressemblera à ceci ( avec un peu de style ajouté ):
En ajoutant à ce que @KyleMit a dit:
col-md-*
pour la plus grande col-xs-*
classes pour le plus petit Ce sera utile lorsque vous affichez la page sur différentes tailles d’écran. Sur un petit écran, utilisez: