Signification des nombres dans "col-md-4", "col-xs-1", "col-lg-2" dans Bootstrap

Ignorant les lettres (x s , sm , md , lg ) pour l'instant , je vais commencer avec seulement les chiffres...

• les nombres (1-12) représentent une partie de la largeur totale de toute div
• toutes les divisions sont divisées en 12 colonnes
• , col-*-6 s'étend sur 6 de 12 colonnes (la moitié de la largeur), col-*-12 s'étend sur 12 de 12 colonnes (toute la largeur), etc

donc, si vous voulez deux colonnes égales pour couvrir un div, écrivez

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

de si vous voulez trois colonnes inégales pour couvrir cette même largeur, vous pouvez écrire:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

vous remarquerez que le nombre de colonnes totalise toujours 12. Il peut être moins de douze, mais attention s'il y en a plus de 12, car vos divs fautives tomberont à la prochaine rangée (pas .row , ce qui est une autre histoire tout à fait).

vous pouvez aussi colonnes de nid dans les colonnes , (mieux avec un .row envelopper autour d'eux) tels que:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

chaque ensemble de divs imbriqués couvre également jusqu'à 12 colonnes de leur div parent. NOTE: étant donné que chaque classe .col a un rembourrage de 15px sur l'une ou l'autre de ces classes côté , vous devriez habituellement envelopper les colonnes imbriquées dans un .row , qui a des marges de-15px. Cela évite de dupliquer le rembourrage, et garde le contenu aligné entre les classes col imbriquées et non imbriquées.

-- vous n'avez pas demandé spécifiquement à propos de l'utilisation du xs, sm, md, lg , mais ils vont main dans la main donc je ne peux pas m'empêcher d'y toucher...

en bref, ils sont utilisés pour définir à laquelle taille de l'écran cette classe devrait s'appliquer:

• xs = petits écrans supplémentaires (téléphones mobiles)
• sm = petits écrans (comprimés)
• md = moyen écrans (certains ordinateurs de bureau)
• lg = grands écrans (autres ordinateurs de bureau))

Lire la grille Options " chapitre de la documentation officielle de Bootstrap pour plus de détails.

Vous devriez habituellement classer un div à l'aide de plusieurs colonne classes de sorte qu'il se comporte différemment selon la taille de l'écran (ce qui est le cœur de ce qui fait de bootstrap responsive). par exemple: un div avec des classes col-xs-6 et col-sm-4 couvrent la moitié de l'écran sur le téléphone mobile (xs) et 1/3 de l'écran sur des tablettes(sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTE: selon le commentaire ci-dessous, les classes de grille pour une taille d'écran donnée s'appliquent à cette taille d'écran et plus à moins qu'une autre déclaration ne l'emporte (c.-à-d. col-xs-6 col-md-4 s'étend sur 6 colonnes sur xs et sm , et sur 4 colonnes sur md et lg , bien que sm et lg n'aient jamais été explicitement déclarés)

NOTE: si vous ne définissez pas xs , il sera par défaut à col-xs-12 (i.e. col-sm-6 est la moitié de la largeur sur sm , md et lg écrans, mais pleine largeur sur xs écrans).

NOTE: il est en fait tout à fait bien si votre .row inclut plus de 12 cols, pour autant que vous sachiez comment ils vont réagir. --C'est une question litigieuse, et tout le monde n'est pas d'accord.