Décomplexons Bootstrap!
Remarquez comment le col-sm occupe la largeur de 100% (en d'autres termes, se transforme en nouvelle ligne) ci-dessous 576pxmais pas le col . Vous pouvez remarquer la largeur actuelle en haut au centre en gif.
Voici le code:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Bootstrap aligne par défaut toutes les colonnes (col) sur une seule ligne de largeur égale. Dans ce cas, trois coloccuperont 100% / 3 de largeur chacun, quelle que soit la taille de l'écran. Vous pouvez le remarquer en gif.
Maintenant, que se passe-t-il si nous voulons afficher une seule colonne par ligne, c'est-à-dire donner 100% de largeur à chaque colonne mais uniquement pour les écrans plus petits ? Maintenant vient les col-xxcours!
J'ai utilisé col-smcar je voulais diviser les colonnes en lignes distinctes en dessous de 576px. Ces 4 col-xxclasses sont fournies par Bootstrap pour différents appareils d'affichage comme les mobiles, les tablettes, les ordinateurs portables, les grands moniteurs, etc.
Donc, col-smse briserait en dessous de 576px, col-mdse briserait en dessous de 768px, col-lgse briserait en dessous de 992px et col-xlse briserait en dessous de 1200px
Notez qu'il n'y a pas de col-xsclasse dans bootstrap 4.
Cela résume à peu près. Vous pouvez retourner au travail.
Mais il y a un peu plus. Vient maintenant le col-*et col-xx-*pour personnaliser la largeur.
Rappelez-vous dans l'exemple ci-dessus que j'ai mentionné cela colou col-xxprend la même largeur d'affilée. Donc, si nous voulons donner plus de largeur à un spécifique, colnous pouvons le faire.
La ligne de bootstrap est divisée en 12 parties, donc dans l'exemple ci-dessus, il y en avait 3, coldonc chacune prend 12/3 = 4 parties. Vous pouvez considérer ces pièces comme un moyen de mesurer la largeur.
Nous pourrions également écrire cela au format col-*c'est- col-4à- dire comme ceci:
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
Et cela n'aurait fait aucune différence car, par défaut, le bootstrap donne une largeur égale à col(4 + 4 + 4 = 12).
Mais, si nous voulons donner 7 parties au 1er col, 3 parties au 2e colet reposer 2 parties (12-7-3 = 2) au 3e col(7 + 3 + 2 donc le total est 12), nous pouvons simplement faire ceci:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
et vous pouvez également personnaliser la largeur des col-xx-*classes.
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
À quoi cela ressemble-t-il dans l'action?
Et si la somme de colest supérieure à 12? Ensuite, le colva se déplacer / s'ajuster à la ligne ci-dessous. Oui, il peut y avoir n'importe quel nombre de colonnes pour une ligne!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
Et si nous voulons 3 colonnes d'affilée pour les grands écrans mais diviser ces colonnes en 2 lignes pour les petits écrans?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
Vous pouvez jouer ici: https://jsfiddle.net/JerryGoyal/6vqno0Lm/
pxdimensions de chacun.