Bootstrap 3 .col-xs-offset- * ne fonctionne pas?

J’utilise le système de grid bootstrap 3 a tellement aimé et tout fonctionnait bien, j’essaie d’utiliser col-xs-offset-1 et ne fonctionne pas bien que .col-sm-offset-1 fonctionne. Qu’est-ce que j’oublie ici ?

col

http://jsfiddle.net/petran/zMcs5/2/

Edit: à partir de Bootstrap 3.1 .col-xs-offset-* existe , voir bootstrap :: options de grid


.col-xs-offset-* n’existe pas. Décalage et classement des colonnes ne concernent que les petites et les plus grandes. (SEULEMENT .col-sm-offset-* , .col-md-offset-* et .col-lg-offset-* )

Voir la documentation officielle: bootstrap :: options de grid

Sinon, vous pouvez append un div vide pour xs-offset (cela vous éviterait de gérer le contenu en plusieurs endroits)

 
col

Les développeurs de bootstrap semblent refuser d’append ces classes xs-ofsets et push / pull, voir ici: https://github.com/twbs/bootstrap/issues/9689

Vous pouvez obtenir le décalage uniquement pour les appareils xs en annulant les pixels supérieurs avec un décalage de 0. Ainsi,

 class="col-xs-offset-1 col-md-offset-0" 

Une suggestion pour quand vous voulez faire un décalage mais vous trouvez incapable à des largeurs supplémentaires:

Utilisez .hidden-xs et .visible-xs pour créer une version de votre bloc html pour les petites largeurs, et une pour tout le rest (où vous pouvez toujours utiliser un offset)

Exemple:

 

This is my banner at XS width.

This is my supporting content at XS width.

col-md-offset-4 ne fonctionne pas si vous appliquez manuellement une marge au même élément. Par exemple

Dans le code ci-dessus, le décalage ne sera pas appliqué. Au lieu de cela, une marge de 0 auto sera appliquée

C’était vraiment frustrant, alors j’ai écrit une liste que vous pouvez saisir pour activer col-offset-xs-* . J’ai également remarqué que le repo Bower de Bootstrap SASS installé cette semaine n’incluait pas col-offset-sm-0 donc il est également modifié, mais sera redondant dans de nombreux cas.

Cale compensée 3 x

  /* Include this after bootstrap.css Add a class of 'col-xs-offset-*' and if you want to disable the offset at a larger size add in 'col-*-offset-0' Examples: All display sizes (xs,sm,md,lg) have an offset of 1 
xs has an offset of 1
xs and sm have an offset of 1
xs, sm and md will have an offset of 1
*/ .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666666666666%; } .col-xs-offset-10 { margin-left: 83.33333333333334%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666666666666%; } .col-xs-offset-7 { margin-left: 58.333333333333336%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666666666667%; } .col-xs-offset-4 { margin-left: 33.33333333333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.666666666666664%; } .col-xs-offset-1 { margin-left: 8.333333333333332%; } .col-xs-offset-0 { margin-left: 0; } /* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */ @media (min-width: 768px) { .col-sm-offset-0, .col-md-offset-0, .col-lg-offset-0 { margin-left: 0; } }

https://gist.github.com/dylanvalade/7362739

Il ne fonctionne pas car col-xs-offset-* est mentionné en dehors de la requête média. si vous voulez l’utiliser, vous devez mentionner tout le décalage (par exemple: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0" )

Mais ce n’est pas correct, ils devraient mentionner col-xs-offset-* dans la requête média

Le CSS bootstrap utilisé dans le lien jsfiddle n’a pas le css pour col-xs-offset- *, c’est pourquoi les CSS n’ont pas été appliqués. Reportez-vous au dernier css de bootstrap.

Le problème est que vous mettez la classe .name au lieu de la classe de noms

au lieu d’utiliser col-md-offset-4, utilisez plutôt offset-md-4, vous n’avez plus besoin d’utiliser col lorsque vous décalez. Dans votre cas, utilisez offset-xs-1 et cela fonctionnera. Assurez-vous d’avoir appelé le dossier bootstrap.css dans votre fichier HTML comme suit.

// ça marche dans le bootstrap 4, il y a eu des changements dans la documentation.

 
Some content...

// ici doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

Conformément à la dernière version du bootstrap v3.3.7, xs-offseting est autorisé. Voir la documentation ici. Donc, vous pouvez utiliser

 
.col-xs-2 .col-xs-offset-1

Juste au cas où quelqu’un commettrait la même erreur que moi avant de trébucher sur cette page, c’est-à-dire append des règles de réinitialisation CSS (comme la très populaire réinitialisation d’Eric Meyer utilisée sur des millions de sites Web) après l’ inclusion du bootstrap.

Aussi, peut-être devrais-je souligner qu’une telle réinitialisation ne sera pas nécessaire avec bootstrap étant donné que bootsrap implémente réellement la réinitialisation de normalize.css v3.0.2 .

Retirez le sharepointvant votre classe pour qu’il ressemble à ceci:

 
col