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 flexbox de la grille. Flexbox signifie que nous avons des options pour changer des colonnes individuelles et modifier des groupes de colonnes au niveau de la ligne . Vous choisissez comment les colonnes grossissent, rétrécissent ou changent autrement.
-
Lors de la création de mises en page en grille, tout le contenu est placé dans des colonnes. La hiérarchie de la grille de Bootstrap va du conteneur à la ligne en passant par la colonne jusqu'à 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 déjà des dizaines de classes conçues 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>
Alignement horizontal
<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
Briser les colonnes sur une nouvelle ligne dans flexbox nécessite un petit hack : ajoutez un élément à l' width: 100%
endroit où vous souhaitez envelopper vos colonnes sur une nouvelle ligne. Normalement, cela est accompli avec plusieurs .row
s, 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
Cours de commande
Utilisez .order-
des classes pour contrôler l' ordre visuel de votre contenu. Ces classes sont réactives, vous pouvez donc définir le order
par point d'arrêt (par exemple, .order-1.order-md-2
). Inclut la prise en charge de 1
l' 5
ensemble des 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 responsive .order-first
et qui modifient le d'un élément en appliquant et , respectivement. Ces classes peuvent également être mélangées avec les classes numérotées selon les besoins..order-last
order
order: -1
order: 6
.order-*
<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 .offset-
classes de grille réactives 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éplacez les colonnes vers la droite à l'aide des .offset-md-*
classes. Ces classes augmentent la marge gauche d'une colonne par *
colonnes. Par exemple, .offset-md-4
se 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>
Outre l'effacement des colonnes aux points d'arrêt réactifs, vous devrez peut-être réinitialiser les décalages. Voyez ceci 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 tels .me-auto
que 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 .col-*
classes peuvent également être utilisées en dehors de a .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 .clearfix
wrapper 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>