Colonnes
Apprenez à modifier les colonnes avec une poignée d'options d'alignement, de commande et de décalage grâce à notre système de grille flexbox. De plus, découvrez comment utiliser les classes de colonnes pour gérer les largeurs des éléments non-grille.
Comment ils travaillent
-
Les colonnes s'appuient sur l'architecture flexible de la grille. Flexbox signifie que nous avons des options pour modifier les colonnes individuelles et modifier des groupes de colonnes au niveau de la ligne. Vous choisissez la manière dont les colonnes s'agrandissent, se réduisent ou changent d'une autre manière.
-
Lors de la création de mises en page de grille, tout le contenu est placé dans des colonnes. La hiérarchie de la grille de Bootstrap va du conteneur de ligne en colonne à votre contenu. En de rares occasions, vous pouvez combiner contenu et colonne, mais sachez qu'il peut y avoir des conséquences imprévues.
-
Bootstrap inclut des classes prédéfinies pour créer des mises en page rapides et réactives. Avec six points d'arrêt et une douzaine de colonnes à chaque niveau de grille, nous avons des dizaines de classes déjà construites pour vous permettre de créer les mises en page souhaitées. Cela peut être désactivé via Sass si vous le souhaitez.
Alignement
Utilisez les utilitaires d'alignement Flexbox pour aligner verticalement et horizontalement les colonnes.
Alignement vertical
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>Horizontal alignment
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>Emballage de colonne
Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une unité, enveloppé sur une nouvelle ligne.
Puisque 9 + 4 = 13 > 12, cette div à 4 colonnes est enveloppée sur une nouvelle ligne comme une unité contiguë.
Les colonnes suivantes continuent le long de la nouvelle ligne.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>Sauts de colonne
Créer des colonnes sur une nouvelle ligne dans flexbox nécessite un petit hack : ajoutez un élément avec width : 100 % à l'endroit où vous souhaitez envelopper vos colonnes sur une nouvelle ligne. Normalement, cela est accompli avec plusieurs .row, mais toutes les méthodes d'implémentation ne peuvent pas en tenir compte.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>Vous pouvez également appliquer cette pause à des points d'arrêt spécifiques avec nos utilitaires d'affichage réactifs.
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>Réorganisation
Classes de commande
Utilisez les classes .order- pour contrôler l'ordre visuel de votre contenu. Ces classes sont réactives, vous pouvez donc définir la commande par point d'arrêt (par exemple, .commande-1.commande-md-2). Inclut la prise en charge de 1 à 5 sur les six niveaux de grille.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>Il existe également des classes responsives .order-first et .order-last qui modifient l'ordre d'un élément en appliquant ordre : -1 et ordre : 6, respectivement. Ces classes peuvent également être mélangées avec les classes numérotées .order-* selon les besoins.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>Colonnes de décalage
Vous pouvez décaler les colonnes de la grille de deux manières : nos classes de grille réactives .offset- et nos utilitaires de marge . Les classes de grille sont dimensionnées pour correspondre aux colonnes tandis que les marges sont plus utiles pour les mises en page rapides où la largeur du décalage est variable.
Classes de décalage
Déplacer les colonnes vers la droite en utilisant les classes .offset-md-*. Ces classes augmentent la marge gauche d'une colonne de * colonnes. Par exemple, .offset-md-4 déplace .col-md-4 sur quatre colonnes.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>En plus de l'effacement des colonnes aux points d'arrêt réactifs, vous devrez peut-être réinitialiser les décalages. Voyez cela en action dans l'exemple de grille.
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>Utilitaires de marge
Avec le passage à flexbox dans la v4, vous pouvez utiliser des utilitaires de marge comme .me-auto pour forcer les colonnes sœurs à s'éloigner les unes des autres.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>Classes de colonnes autonomes
Les classes .col-* peuvent également être utilisées en dehors d'un .row pour donner à un élément une largeur spécifique. Chaque fois que des classes de colonnes sont utilisées comme enfants non directs d'une ligne, les remplissages sont omis.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>Les classes peuvent être utilisées avec des utilitaires pour créer des images flottantes réactives. Assurez-vous d'envelopper le contenu dans un wrapper .clearfix pour effacer le flotteur si le texte est plus court.
Un paragraphe de texte d'espace réservé. Nous l'utilisons ici pour montrer l'utilisation de la classe clearfix. Nous ajoutons ici quelques phrases dénuées de sens pour montrer comment les colonnes interagissent ici avec l'image flottante.
Comme vous pouvez le voir, les paragraphes s'enroulent gracieusement autour de l'image flottante. Maintenant, imaginez à quoi cela ressemblerait avec du contenu réel ici, plutôt que simplement ce texte d'espace réservé ennuyeux qui continue encore et encore, mais ne transmet en fait aucune information tangible. Il prend simplement de la place et ne doit pas vraiment être lu.
Et pourtant, vous êtes là, persévérant dans la lecture de ce texte fictif, espérant plus d'idées ou un œuf de Pâques caché de contenu. Une blague, peut-être. Malheureusement, il n'y a rien de tout cela ici.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>