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

Je commence à utiliser Bootstrap 3 et j’ai du mal à comprendre comment utiliser les classes de grid.

Voici ce que j’ai compris jusqu’à présent:

Il semble que les classes col-sm-# et col-lg-# diffèrent des anciennes col-# en ce sens qu’elles ne s’appliqueront que lorsque les écrans dépassent une certaine taille (respectivement 768px et 992px). Si vous omettez les -sm- ou -lg- les divs ne seront jamais réduites dans une colonne.

Cependant, lorsque je crée deux div à l’intérieur d’une ligne qui sont tous deux col-sm-6 il semble qu’ils ne soient côte à côte que lorsque la fenêtre fait entre 768 et 992 pixels de large. En d’autres termes, si je réduis complètement la fenêtre et que je l’élargis lentement, la mise en page est à une seule colonne, puis à deux colonnes, puis à nouveau à une seule colonne.

  1. Est-ce le comportement prévu?
  2. Si je veux deux colonnes pour quelque chose de plus de 768px, devrais-je appliquer les deux classes? (
    )
  3. Le col-6 devrait col-6 également être inclus?

[MISE À JOUR CI-DESSOUS]

J’ai jeté un autre coup d’oeil aux documents et il semble que j’ai négligé une section qui parle spécifiquement de cela.

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 cours sont destinés à être combinés.

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

Autre que lire les documents trop rapidement, je pense que j’étais confus car 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 v2 et v3 est assez différent (pour une meilleure OMI).

UPDATE pour une version stable:

Cette question a été écrite à l’origine lorsque RC1 était sorti. Ils ont apporté des modifications majeures à RC2, donc pour tout ceux qui lisent ceci maintenant, tout ce qui est mentionné ci-dessus ne s’applique toujours pas.

Au moment où j’écris cela, les classes col-*-# semblent s’appliquer vers le haut. Ainsi, par exemple, si vous voulez qu’un élément soit composé de 12 colonnes (largeur totale) pour les téléphones, mais de deux colonnes 6 (une demi-page) pour les tablettes et plus, vous ferez quelque chose comme ceci:

 
... //NO NEED FOR col-md-6 or col-lg-6

(Ils ont également ajouté un point d’arrêt 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 grid dans Bootstrap 3.

Il couvre également les mixins, etc.

Pour modifier la réponse de SDP ci-dessus, vous n’avez PAS besoin de déclarer col-xs-12 dans

. Bootstrap 3 est d’abord mobile, donc chaque colonne div est supposée avoir une largeur de 100% par défaut – ce qui signifie qu’à la taille “xs” elle est de 100%, elle adoptera toujours ce comportement indépendamment de ce que vous définissez à sm, md, lg . Si vous voulez que vos colonnes xs ne soient pas à 100%, vous faites normalement une col-xs-(1-11) .

“Si je veux deux colonnes pour plus de 768px, devrais-je appliquer les deux classes?”

Cela devrait être aussi simple que:

 

Pas besoin d’append le col-lg-6 aussi.

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, si vous utilisez xs alors les colonnes seront les mêmes à partir de 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 voulez donner une largeur différente aux colonnes sur différents périphériques ou résolutions, vous pouvez append plusieurs classes, par exemple

ce qui précède changera la largeur en fonction des résolutions de l’écran, N’OUBLIEZ PAS je garde le total des colonnes dans chaque classe = 12

J’espère que ma réponse aidera!