Compréhension des classes de grille (col-sm- # et col-lg- #) dans Bootstrap 3

Question

Je me suis mise en route sur Bootstrap 3 et j'ai un peu de mal à comprendre comment la grille de cours sont destinés à être utilisés.

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

Il apparaît que les classes col-sm-# et col-lg-# diffèrent de la plaine de vieux - col-# en ce qu'ils ne s'appliquent que lorsque les écrans sont au-dessus d'une certaine taille (768px et 992px respectivement). Si vous omettez le -sm - ou -lg - les divs ne sera jamais d'effondrement dans une même colonne.

Cependant, quand j'ai créer deux divs l'intérieur d'une ligne qui sont à la fois col-sm-6 il semble qu'ils sont seulement côte à côte lorsque la fenêtre est entre 768px et 992px de large. En d'autres termes, si j'ai rétrécir la fenêtre vers le bas et lentement puis de l'élargir, la mise en page est simple colonne, deux colonnes, puis de retour à une seule colonne de nouveau.

1. Est-ce le comportement voulu?
2. Si je veux deux colonnes pour rien au-dessus de 768px, 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">

Answer 1

[MISE À JOUR CI-DESSOUS]

J'ai pris un autre regard sur les docs et il semble que j'ai négligé un article qui parle spécifiquement à ce sujet.

Les réponses à mes questions:

1. Oui, ils sont destinés à s'appliquer uniquement à des gammes spécifiques, plutôt que de tout au-dessus d'une certaine largeur.

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

3. Il semble que cela est approprié, dans certains cas, mais pas les autres parce que la col-nombre de classes sont essentiellement équivalent au col-xsm-# ou, largeurs supérieures à 0px (toutes les largeurs).

Autres que la lecture de la documentation trop vite, je pense que je suis confondu parce que je suis venu dans Bootstrap 3 avec un "Bootstrap 2 mentalité". Plus précisément, j'ai été en utilisant l' (en option) en réponse styles (bootstrap-responsive.css) en v2 et v3 est tout à fait différent (pour le meilleur de l'OMI).

Mise à JOUR pour la version stable:

Cette question a été écrit à l'origine lors de la RC1. Ils ont apporté des changements majeurs dans la RC2, donc, pour toute personne lisant ce maintenant, pas tout ce qui est mentionné ci-dessus s'applique toujours.

Comme quand je suis en train d'écrire cela, l' col-*-# classes NE semblent s'appliquer à la hausse. Ainsi, par exemple, si vous souhaitez qu'un élément à 12 colonnes (largeur) pour les téléphones, mais deux 6 colonnes (une demi-page) pour les comprimés et, 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 autre xs point de rupture après que cette question a été écrit.)

Answer 2

Ceci est un très bon tutoriel qui explique comment utiliser les nouvelles classes de grille dans bootstrap. Il couvre également les mixins

http://www.helloerik.com/bootstrap-3-grid-introduction

Answer 3

"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 les col-lg-6 aussi.

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

Answer 4

La meilleure façon de comprendre est simplement de penser à partir du haut vers le bas ( Grands Bureaux pour les Téléphones Mobiles)

Tout d'abord, comme le B3 est le premier mobile de sorte que si vous utilisez xs ensuite les colonnes seront à même de Grands bureaux xs ( je recommande d'utiliser xs ou sm car cela permet de garder tout le chemin que vous voulez sur chaque taille de l'écran )

Deuxièmement, si vous souhaitez donner la différente largeur des colonnes sur différents appareils ou de résolutions, que vous pouvez ajouter plusieurs classes e.g

le ci-dessus modifie la largeur en fonction de la résolution d'écran, n'oubliez pas que je suis en gardant le total des colonnes dans chaque class = 12

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

Answer 5

Pour modifier la réponse de SDP ci-dessus, vous n'avez PAS besoin de déclarer col-xs-12 en <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 que pour la taille "xs", elle est à 100% de largeur, le comportement par défaut sera toujours le même, quel que soit le paramètre défini. sm, md, lg . Si vous souhaitez que vos colonnes xs ne soient pas à 100%, vous effectuez normalement un col-xs-(1-11) .