¿Bootstrap 3 .col-xs-offset- * no funciona?

Estoy usando el sistema de cuadrícula bootstrap 3, me encantó hasta ahora y todo funcionaba bien, estoy tratando de usar col-xs-offset-1 y no funciona aunque .col-sm-offset-1 funciona. Que me estoy perdiendo aqui ?

<div class="col-xs-2 col-xs-offset-1">col</div>

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

Editar: a partir de Bootstrap 3.1 .col-xs-offset-* existe , consulte las opciones de bootstrap :: grid

.col-xs-offset-*no existe. Los pedidos de compensación y columna son solo para pequeños y más. (SOLO .col-sm-offset-*, .col-md-offset-*y .col-lg-offset-*)

Ver la documentación oficial: bootstrap :: grid options

Alternativamente, puede agregar un div vacío para xs-offset (le ahorraría tener que administrar el contenido en más de un lugar)

<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>

Los desarrolladores de bootstrap parecen negarse a agregar esas xs- ofsets y clases push / pull, consulte aquí: https://github.com/twbs/bootstrap/issues/9689

Puede establecer el desplazamiento solo para los dispositivos xs negando los píxeles más altos con un desplazamiento 0. Al igual que,

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

Una sugerencia para cuando quiera hacer un desplazamiento pero no pueda hacerlo con anchos extra pequeños:

Utilice .hidden-xsy.visible-xs para hacer una versión de su bloque html para anchos extra pequeños, y una para todo lo demás (donde aún puede usar un desplazamiento)

Ejemplo:

<div class="hero container">
  <div class="row">
    <div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
      <h2>This is a banner at the top of my site. It shows in everything except XS</h2>
      <p>Here are some supporting details about my banner.</p>
    </div>
    <div class="visible-xs col-xs-12">
      <h2 class="pull-right">This is my banner at XS width.</h2>
      <p class="pull-right">This is my supporting content at XS width.</p>
    </div>
  </div>
</div>

col-md-offset-4 no funciona si aplica el margen manualmente al mismo elemento. Por ejemplo

En el código anterior, no se aplicará la compensación. En su lugar, se aplicará un margen de 0 automático

Esto fue realmente frustrante, así que escribí una esencia que puedes tomar y que te permite col-offset-xs-*. También noté que el repositorio de Bootstrap SASS que Bower instaló esta semana no se incluyó, col-offset-sm-0por lo que también se calculó, pero será redundante en muchos casos.

Cuña de compensación Bootstrap 3 xs

  /*

  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
  <div class="col-xs-11 col-xs-offset-1 col-sm-3">

  xs has an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">

  xs and sm have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">

  xs, sm and md will have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">

*/

.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

No funciona porque col-xs-offset-*se menciona fuera de la consulta de medios. si quieres usarlo, hay que mencionar todo el desplazamiento (por ejemplo: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")

Pero esto no es correcto, deberían mencionarlo col-xs-offset-*en la consulta de medios.

El CSS de arranque utilizado en el enlace jsfiddle, no tiene el CSS para col-xs-offset- *, es por eso que el CSS no se ha aplicado. Consulte el css de bootstrap más reciente.

A partir de Boostrap 4.x, al igual que col-xs-6 ahora es solo col-6

offset-xs-6 ahora es solo offset-6 .

Ya lo probé, definitivamente funciona.

El problema es que estás poniendo .name class en lugar de nameclass

en lugar de usar col-md-offset-4 use en lugar de offset-md-4, ya no tiene que usar col cuando está compensando. En su caso, use offset-xs-1 y esto funcionará. asegúrese de haber llamado a la carpeta bootstrap.css en su html de la siguiente manera.

// funciona en bootstrap 4, hubo algunos cambios en la documentación. No necesitamos el prefijo col-, solo offset-lg-3 eg

<div class="row">
   <div class="offset-lg-3 col-lg-6"> Some content...
   </div>
</div>

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

Según el último bootstrap v3.3.7, se permite xs-offseting. Consulte la documentación aquí bootstrap offseting . Entonces puedes usar

<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>

En caso de que alguien cometa el mismo error que yo hice antes de tropezar con esta página, es decir, agregar CSSreglas de restablecimiento (como el muy popular restablecimiento de Eric Meyer que se usa en millones de sitios web) después de incluir bootstrap.

Además, tal vez debería señalar que dicho reinicio no será necesario con bootstrap dado que bootsrap realmente implementa el reinicio normalize.css v3.0.2 .

Quite el punto delante de su clase para que se vea así:

<div class="col-xs-2 col-xs-offset-1">col</div>