web-dev-qa-db-fra.com

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

Je commence à utiliser Bootstrap 3 et je ne parviens pas à comprendre comment les classes de grille doivent être utilisées.

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

Il semble que les classes col-sm-# et col-lg-# diffèrent de l'ancien col-# en clair en ce qu'elles ne s'appliquent que lorsque les écrans dépassent une certaine taille (respectivement 768px et 992px). Si vous omettez l'option -sm- ou -lg-, les div ne seront jamais réduites en une seule colonne.

Cependant, lorsque je crée deux divs dans une ligne qui sont tous deux col-sm-6, il semble qu'ils soient niquement côte à côte lorsque la fenêtre a une largeur comprise entre 768px et 992px. En d'autres termes, si je réduis la fenêtre au maximum et que je l'élargis lentement, la présentation est une colonne, puis deux colonnes, puis retourne à une colonne encore.

  1. Est-ce le comportement prévu?
  2. Si je veux deux colonnes pour tout ce qui dépasse 768px, dois-je appliquer les classes les deux? (<div class="col-sm-6 col-lg-6">)
  3. Est-ce que col-6aussi devrait être inclus? <div class="col-6 col-sm-6 col-lg-6">
htmlcsscss3twitter-bootstraptwitter-bootstrap-3
85
emersonthis

[UPDATE BELOW]

J'ai jeté un autre coup d'œil aux docs et il semble que j'ai oublié une section qui parle spécifiquement de cela.

Les réponses à mes questions:

  1. Oui, ils sont censé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 car les classes de classes sont fondamentalement équivalentes à col-xsm- # ou aux largeurs supérieures à 0px (toutes les largeurs).

Hormis la lecture trop rapide de la documentation, je pense avoir été dérouté car je suis entré dans Bootstrap 3 avec une "mentalité Bootstrap 2". Plus précisément, j'utilisais les styles réactifs (facultatif) (bootstrap-responsive.css) dans les versions v2 et v3, ce qui est très différent (pour la meilleure messagerie instantanée).

PDATE pour la version stable:

Cette question a été écrite à la sortie de RC1. Ils ont apporté des modifications majeures à RC2, donc pour tous ceux qui lisent ceci, tout ce qui est mentionné ci-dessus ne s'applique pas toujours.

Au moment où j'écris ceci, les classes col-*-# semblent s'appliquer à la hausse. Ainsi, par exemple, si vous souhaitez qu'un élément ait 12 colonnes (pleine largeur) pour les téléphones, mais deux 6 colonnes (une 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 d'arrêt supplémentaire xs après la rédaction de cette question.)

60
emersonthis

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.

39
Srikanth

Pour modifier la réponse de SDP ci-dessus, vous n'avez PAS besoin de déclarer col-xs-12 in <div class="col-xs-12 col-sm-6">. Bootstrap 3 est mobile-first, donc chaque colonne de div est supposée être une div de largeur à 100% par défaut - ce qui signifie qu'à la taille "xs", elle est à 100% de largeur, le comportement par défaut est toujours le même indépendamment de ce que vous définissez à sm, md, lg. Si vous voulez que vos colonnes xs ne soient pas à 100%, vous effectuez normalement une col-xs-(1-11).

5
helloerik

La meilleure façon de comprendre est simplement de penser du haut vers le bas (des ordinateurs de bureau larges aux téléphones portables).

Premièrement, comme B3 est d'abord mobile, donc si vous utilisez xs, les colonnes seront identiques des grands ordinateurs de bureau aux xs (je vous recommande d'utiliser xs ou sm, afin que tout soit comme vous le souhaitez, quelle que soit la taille de l'écran).

Deuxièmement, si vous voulez donner une largeur différente aux colonnes de différents périphériques ou résolutions, vous pouvez ajouter plusieurs classes, par exemple

ce qui précède changera la largeur en fonction de la résolution de l'écran. N'OUBLIEZ PAS que je garde le nombre total de colonnes dans chaque classe = 12

J'espère que ma réponse aiderait!

4
Aslam

"Si je veux deux colonnes pour tout ce qui dépasse 768px, devrais-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 aussi.

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

4
Zim