Question Quelle est la différence entre col-lg- *, col-md- * et col-sm- * dans Bootstrap?


Quelle est la différence entre col-lg-* , col-md-* et col-sm-* dans Twitter Bootstrap?


452
2017-11-08 17:34


origine


Réponses:


Mis à jour en 2018 ...

le Bootstrap 3 la grille entre 4 niveaux (ou "points d'arrêt") ...

  • Extra petit (pour les smartphones .col-xs-*)
  • Petit (pour les comprimés .col-sm-*)
  • Moyen (pour les ordinateurs portables .col-md-*)
  • Grand (pour les ordinateurs portables / ordinateurs de bureau .col-lg-*).

Ces tailles de grille vous permettent de contrôler le comportement de la grille sur différentes largeurs. Les différents niveaux sont contrôlés par CSS requêtes média.

Donc, dans la grille de 12 colonnes de Bootstrap ...

col-sm-3 est 3 de 12 colonnes de large (25%) sur un typique petit largeur de l'appareil (> 768 pixels)

col-md-3 est 3 de 12 colonnes de large (25%) sur un typique moyen largeur de l'appareil (> 992 pixels)


Le plus petit niveau (xs, sm ou md) définit également la taille pour des largeurs d'écran plus grandes. Donc, pour le même colonne de taille sur tous les niveaux, il suffit de définir la largeur de la plus petite fenêtre ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> est le même que,

<div class="col-sm-3">..</div>

Les plus grands niveaux sont implicite. Car col-sm-3 veux dire 3 units on sm-and-up, sauf en cas de substitution spécifique par un plus grand groupe utilisant une taille différente.

xs(par défaut)> surchargé par sm > surchargé par md > surchargé par lg


Combiner les classes à utiliser changent de largeur de colonne sur différent tailles de grille. Cela crée une mise en page réactive.

<div class="col-md-3 col-sm-6">..</div>

le sm, md et lg les grilles seront toutes "empilées" verticalement sur les écrans / fenêtres de moins de 768 pixels. C'est là que le xs la grille s'adapte. Colonnes qui utilisent le col-xs-* les cours seront ne pas empiler verticalement et continuer à réduire les plus petits écrans.

Redimensionner votre navigateur en utilisant cette démo et vous verrez les effets de mise à l'échelle de la grille.


Dans Bootstrap 4 il y a un nouveau -xl- taille, voir cette démo. Également -xs- l'infixe a été supprimé, les plus petites colonnes sont simplement col-1, col-2.. col-12, etc..

col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px

Démo Bootstrap 4 Grid

En outre, cet article explique plus sur la grille Bootstrap


419
2017-11-08 18:02



Le bootstrap docs expliquez-le, mais il m'a fallu du temps pour l'obtenir. Cela me semble plus logique lorsque je m'explique de deux manières:

Si vous pensez que les colonnes commencent horizontalement, vous pouvez choisir quand vous voulez les empiler.

Par exemple, si vous commencez par des colonnes: A B C

Vous décidez quand devraient-ils s'empiler pour être comme ceci:

UNE

B

C

Si vous choisissez col-lg, les colonnes seront empilées lorsque la largeur est <1200px.

Si vous choisissez col-md, les colonnes s'empileront lorsque la largeur est <992px.

Si vous choisissez col-sm, les colonnes seront empilées lorsque la largeur est <768px.

Si vous choisissez col-x, les colonnes ne seront jamais empilées.

D'un autre côté, si vous pensez que les colonnes commencent à être empilées, vous pouvez choisir à quel point elles deviennent horizontales.:

Si vous choisissez col-sm, les colonnes deviendront horizontales si la largeur est> = 768px.

Si vous choisissez col-md, les colonnes deviendront horizontales si la largeur est> = 992px.

Si vous choisissez col-lg, les colonnes deviendront horizontales si la largeur est> = 1200px.


210
2018-02-22 03:00



De Documentation Twitter Bootstrap:

  • petite grille (≥ 768px) = .col-sm-*,
  • grille moyenne (≥ 992px) = .col-md-*,
  • grande grille (≥ 1200px) = .col-lg-*.

56
2017-11-08 17:37



Je pense que l'aspect confus de ceci est le fait que BootStrap 3 est un premier système réactif mobile et ne parvient pas à expliquer comment cela affecte la hiérarchie col-xx-n dans cette partie de la documentation Bootstrap. Cela vous amène à vous demander ce qui se passe sur les périphériques plus petits si vous choisissez une valeur pour les périphériques plus grands et vous vous demandez s'il est nécessaire de spécifier plusieurs valeurs. (Vous ne le faites pas)

Je tenterais de clarifier cela en disant que ... Les types de grain inférieur (xs, sm) retiennent l'apparence de la mise en page sur les écrans plus petits et les grands types (md, lg) s'affichent correctement uniquement sur les écrans plus grands, mais enveloppent les colonnes sur les périphériques plus petits. Les valeurs citées dans les exemples précédents se rapportent au seuil auquel bootstrap dégrade l'apparence pour s'adapter à la propriété d'écran disponible.

Ce que cela signifie en pratique, c'est que si vous faites les colonnes col-xs-n, elles conservent une apparence correcte même sur de très petits écrans, jusqu'à ce que la taille de la fenêtre soit si restrictive que la page ne puisse s'afficher correctement. Cela signifie que les périphériques dont la largeur est inférieure ou égale à 768 pixels doivent afficher votre table telle que vous l'avez conçue plutôt que dégradée (forme de colonne simple ou enveloppée). Évidemment, cela dépend toujours du contenu des colonnes et c'est tout le problème. Si la page tente d'afficher plusieurs colonnes de données volumineuses, côte à côte sur un petit écran, les colonnes s'enrouleront naturellement de façon horrible si vous ne les avez pas prises en compte. Par conséquent, en fonction des données dans les colonnes, vous pouvez décider du point auquel la mise en page est sacrée pour afficher le contenu de manière adéquate.

par exemple. Si votre page contient trois colonnes col-sm-n bootstrap encapsule les colonnes dans des lignes lorsque la largeur de la page passe en dessous de 992px. Cela signifie que les données sont toujours visibles mais nécessiteront un défilement vertical pour l'afficher. Si vous ne voulez pas que votre mise en page se dégrade, choisissez xs (à condition que vos données puissent être affichées correctement sur un périphérique de résolution inférieure sur trois colonnes)

Si la position horizontale des données est importante, vous devez essayer de choisir des valeurs de granularité inférieures pour conserver la nature visuelle. Si la position est moins importante mais que la page doit être visible sur tous les appareils, une valeur plus élevée doit être utilisée.

Si vous choisissez col-lg-n, les colonnes s'affichent correctement jusqu'à ce que la largeur de l'écran passe sous le seuil xs de 1200px.


22
2018-02-09 17:59



Tailles de l'appareil et préfixe de classe:

  • Petits appareils supplémentaires Téléphones (<768px) - .col-xs-
  • Petits appareils Tablettes (≥768px) - .col-sm-
  • Ordinateurs de bureau de taille moyenne (≥992px) - .col-md-
  • Grands appareils Ordinateurs de bureau (≥1200px) - .col-lg-

Options de grille:

Bootstarp Grid System

Référence: Système de grille


8
2017-07-25 10:26



.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

4
2018-04-06 06:26



TL; DR

.col-X-Y veux dire sur la taille de l'écran X et plus, étirer cet élément pour remplir les colonnes Y.

Bootstrap fournit une grille de 12 colonnes par .row, alors Y = 3 signifie largeur = 25%.

xs, sm, md, lg sont les tailles pour smartphone, tablette, ordinateur portable, bureau respectivement.

Le point de spécifier différentes largeurs sur différentes tailles d'écran est de vous permettre de faire des choses plus grandes sur des écrans plus petits.

Exemple

<div class="col-lg-6 col-xs-12">

Signification: 50% de largeur sur les ordinateurs de bureau, 100% de largeur sur les mobiles, tablettes et ordinateurs portables.


2
2018-03-11 19:28



Un cas particulier: avant d’apprendre le système de grille bootstrap, assurez-vous que le zoom du navigateur est défini sur 100% (cent pour cent). Par exemple: Si la résolution de l'écran est de 1600px x 900px et que le zoom du navigateur est de 175%, les éléments "bootstrap-ped" seront empilés.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Zoom sur le zoom 100%

Navigateur 100 pour cent - éléments placés horizontalement

Zoom Chrome 175%

Navigateur 175 pour cent - éléments empilés


0
2017-10-18 14:48



eh bien, il est utilisé pour dire à bootstrap combien de colonnes doivent être placées dans une rangée en fonction de la taille de l'écran -

col-xs-2

afficherait seulement 2 colonnes dans une rangée dans l'écran extra-petit (xs), de la même façon que sm définit un petit écran, md (taille moyenne), lg (taille grande), mais selon bootstrap plus petite règle première, si vous mentionnez

xs-col-2 md-col-4

puis 2 colonnes seraient affichées dans chaque rangée pour les tailles d'écran allant de xs à sm (inclus) et changeraient dès qu'elles atteindraient la taille suivante, c'est-à-dire md à lg (inclus) Pour une meilleure compréhension des tailles d'écran, essayez de les exécuter dans différents modes d'écran en mode développeur de chrome (ctr + shift + i) et essayez différents pixels ou périphériques


0
2017-12-11 18:32