Bootstrap 3 et .col-xs-* — N'avez-vous pas besoin de lignes de 12 unités?

Je suis un peu confus par le Bootstrap 3 de la documentation et donc l'utilisation de la .col-xs-* classes.

Les docs pour Options De La Grille dire que l'ensemble de la grille des systèmes d'utilisation de 12 colonnes.

Si vous jetez un oeil à Bootstrap 3 docs pour un Exemple de Mobile et de Bureau mise en page, ils montrent la première ligne du .col-xs-* classes totalisant 18 unités de colonne.

Ce qui donne? Comment cela peut-il être? Sont les docs de mal?

Merci

Une question connexe: stackoverflow.com/questions/23014782/...

OriginalL'auteur user3290740 | 2014-02-20

  1. 14

    Bootstrap est un 12 colonne débarrasser, mais vous pouvez mettre plus de 12 colonnes dans une rangée. Les colonnes restantes seront tout simplement envelopper sur la prochaine ligne ci-dessous, en fonction de la fenêtre d'affichage.

    Dans cet exemple, sur "md" fenêtres de visualisation (≥992px), le contenu s'est étendue sur 12 colonnes total (8 + 4). Mais sur "xs" (<768px) le contenu durée de 18 colonnes, il y aurait une ligne complète (12 colonnes), puis en dessous d'une demi-ligne (6 colonnes).

    <div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

    md...

    |    8   |  4 |

    xs...

    |     12     |
|   6  |

    EDIT: assurez-vous de vérifier la Sensible Colonne De Réinitialisation section de la documentation si vous rencontrez des problèmes avec des colonnes qui n'ont pas d'emballage correctement.

    Si vous avez 3 colonnes de col-md-6 (par exemple), où la première est plus élevé que les 2 autres, vous ne serez pas obtenir un bon alignement sur la gauche de la 2e rangée. La 2ème colonne sera placé à côté de la première, mais la 3ème colonne ne va pas aller sous la première colonne, car il est flottant et de la première colonne est un peu heigher. En raison du flotteur gauche, il y a encore de la place à gauche et la 3ème colonne apparaîtra dans le cadre de la 2ème colonne au lieu de la 1ère comme souhaité.
    Il y a une solution intégrée pour cela. <div class="clearfix visible-xs-block"></div> Voir le Grid System -> Responsive Column Reset section de la documentation.

    OriginalL'auteur Schmalzy

  2. 10

    Pense de la grille de mise en page plus en termes d'une grille différente pour chaque taille, lg, md, sm, et xs (ou des points de rupture pour être précis) qui utilisent le même balisage. Il pourrait aider à ouvrir quelques instances du navigateur et un exemple d'une grille de mise en page. Suivez avec ce violon, ou ce balisage:

    <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>

    Vous aurez besoin de connaître votre fenêtre d'affichage de la largeur en pixels, donc envisager une plugin de navigateur qui rend cette information disponible ou ouvrez une console et exécuter cet extrait:

    Mathématiques.max(le document.documentElement.clientWidth, fenêtre.innerWidth || 0)

    Commencer avec une fenêtre d'affichage > 1200 pixels:

    Bootstrap 3 et .col-xs-* — N'avez-vous pas besoin de lignes de 12 unités?

    Les colonnes réelles sont décidées par le col-lg-* classes à cause du point d'arrêt. Cela va créer une grille pour que le point d'arrêt.

    Maintenant, regardez les deux autres points de rupture, col-sm-* et col-xs-*.

    col-sm-* à affecter:

    Bootstrap 3 et .col-xs-* — N'avez-vous pas besoin de lignes de 12 unités?

    col-xs-* à affecter:

    Bootstrap 3 et .col-xs-* — N'avez-vous pas besoin de lignes de 12 unités?

    La pause les points vous permettent de créer un tout nouveau grille par la taille. Donc, en théorie, les lignes de la loi comme une "stricte" nouvelle ligne, où, comme le col des chiffres comme

    <div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>

    peut vigueur d'une nouvelle ligne si la somme > 12. Ceci est fait de sorte que vous n'avez pas à avoir je ne sais combien de balisages différents modèles pour différents points d'arrêt. Ils sont des guides.

    OriginalL'auteur Carrie Kendall

  3. 0

    Le nombre de lignes d'une colonne occupe est le dernier numéro de la classe.

    Ainsi, par exemple, ces classes suivantes:

    .col-xs-12 .col-md-8  
.col-xs-6 .col-md-4

    résultera en une seule ligne sur le md-largeur de l'affiche, mais l'un et demi ligne sur xs-largeur de l'affiche.

    Cela signifie simplement que sur les petits écrans ces éléments ne sont pas affichés côte à côte, mais plutôt sur le dessus les uns des autres.

    Ma question est plus le long des lignes de... pourquoi faire des lignes de col-sm, col-md, col-lg tous les ajouter à 12 unités de colonne, tandis que col-xs semble ne pas avoir cette contrainte... et je ne le trouve pas documentée dans le Bootstrap de docs.
    col-xs a les mêmes contraintes. Je pense que vous pourriez être confus au sujet, c'est que si vous n'ajoutez PAS de col-xs à votre classe (c'est à dire le col-xs-6), il passe automatiquement au col-xs-12 (toute la largeur de la colonne)
    Il n' pas par défaut pour le col-xs-12. Il n'est pas évoquée. il a juste toute la largeur comme c'est le divs le comportement par défaut de briller à travers. Vous pourriez penser qu'il n'a pas d'importance, mais 4 divs de md-6 md-6 lg-6 lg-6 échoue sur le moyen d'affichage, et le premier grand div superposition de tous les chars...

    OriginalL'auteur Nit