Comprendre les classes de grille (col-sm- # et col-lg- #) dans Bootstrap 3

Je commence avec Bootstrap 3 et j'ai du mal à comprendre comment les classes de grille sont censées être utilisées.

Voici ce que j'ai découvert jusqu'à présent:

Il semble que les classes col-sm-#et col-lg-#diffèrent des anciennes col-#en ce qu'elles ne s'appliqueront que lorsque les écrans sont au-dessus d'une certaine taille (768px et 992px respectivement). Si vous omettez -sm- ou -lg-, les div ne se réduiront jamais en une seule colonne.

Cependant, lorsque je crée deux div à l'intérieur d'une ligne qui sont les deux, col-sm-6il semble qu'ils ne soient côte à côte que lorsque la fenêtre mesure entre 768px et 992px de large. En d' autres termes, si je recule devant la fenêtre tout le chemin vers le bas puis lentement élargis, la mise en page est une seule colonne, puis deux colonnes, puis de nouveau à une seule colonne à nouveau .

1. Est-ce le comportement prévu?
2. Si je veux deux colonnes pour tout ce qui dépasse 768 pixels, dois-je appliquer les deux classes? (<div class="col-sm-6 col-lg-6"> )
3. Devrait col-6 également être inclus?<div class="col-6 col-sm-6 col-lg-6">

[MISE À JOUR CI-DESSOUS]

J'ai jeté un autre regard sur les documents et il semble que j'ai négligé une section qui en parle spécifiquement.

Les réponses à mes questions:

1. Oui, ils sont destinés à s'appliquer uniquement à des plages spécifiques, plutôt qu'à tout ce qui dépasse une certaine largeur.

2. Oui, les classes sont destinées à être combinées.

3. Il semble que cela soit approprié dans certains cas mais pas dans d'autres car les classes col- # sont fondamentalement équivalentes à col-xsm- # ou, des largeurs supérieures à 0px (toutes les largeurs).

A part lire la documentation trop rapidement, je pense que j'étais confus parce que je suis entré dans Bootstrap 3 avec une "mentalité Bootstrap 2". Plus précisément, j'utilisais les styles réactifs (facultatifs) (bootstrap-responsive.css) dans la v2 et la v3 est assez différente (pour le meilleur IMO).

MISE À JOUR pour une version stable:

Cette question a été écrite à l'origine lorsque RC1 était sorti. Ils ont apporté des changements majeurs à RC2, donc pour quiconque lit ceci maintenant, tout ce qui est mentionné ci-dessus ne s'applique toujours pas.

À partir du moment où j'écris ceci, les col-*-#classes semblent s'appliquer à la hausse. Ainsi, par exemple, si vous voulez qu'un élément soit 12 colonnes (pleine largeur) pour les téléphones, mais deux 6 colonnes (demi-page) pour les tablettes et plus, vous feriez quelque chose comme ceci:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Ils ont également ajouté un point de rupture xs supplémentaire après la rédaction de cette question.)

Ici, vous avez un très bon tutoriel, qui explique comment utiliser les nouvelles classes de grille dans Bootstrap 3.

Il couvre également les mixins, etc.

"Si je veux deux colonnes pour quelque chose de plus de 768px, dois-je appliquer les deux classes?"

Cela devrait être aussi simple que:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

Pas besoin d'ajouter le col-lg-6 trop.

Démo: http://www.bootply.com/73119

La meilleure façon de comprendre est de penser simplement de haut en bas (grands ordinateurs de bureau aux téléphones mobiles)

Tout d'abord, comme B3 est d'abord mobile, donc si vous utilisez xs, les colonnes seront les mêmes des grands bureaux à xs (je recommande d'utiliser xs ou sm car cela gardera tout comme vous le souhaitez sur chaque taille d'écran)

Deuxièmement, si vous souhaitez donner une largeur différente aux colonnes sur différents appareils ou résolutions, vous pouvez ajouter plusieurs classes, par exemple

ce qui précède changera la largeur en fonction des résolutions d'écran, RAPPELEZ-VOUS que je garde le total des colonnes dans chaque classe = 12

J'espère que ma réponse vous aidera!

Pour modifier la réponse SDP ci - dessus, vous ne pouvez pas déclarer col-xs-12dans <div class="col-xs-12 col-sm-6">. Bootstrap 3 est mobile-first, donc chaque colonne div est supposée être un div de 100% de largeur par défaut - ce qui signifie qu'à la taille "xs", il est de 100% de largeur, il sera toujours par défaut ce comportement quel que soit ce que vous avez défini à sm, md, lg. Si vous voulez que vos xscolonnes ne soient pas à 100%, vous faites normalement un col-xs-(1-11).

C'est peut-être tard car je pense que la plupart d'entre nous utilisent BS4. Cet article a expliqué toutes les questions que vous avez posées de manière détaillée et simple comprend également ce qu'il faut faire quand. Le guide détaillé pour utiliser bs4 oubootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7