twitter-bootstrap - left - padding bootstrap 3
Bootstrap 3.col-xs-offset-*no funciona? (15)
Estoy usando el sistema de red bootstrap 3, me encantó hasta ahora y todo funcionaba bien, estoy tratando de usar col-xs-offset-1 y no funciona, aunque funciona .col-sm-offset-1. Que me estoy perdiendo aqui ?
<div class="col-xs-2 col-xs-offset-1">col</div>
// funciona en bootstrap 4, hubo algunos cambios en la documentación. No necesitamos prefix col-, solo offset-lg-3 por ejemplo
<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
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 esos xs-ofsets y clases push / pull, mira aquí: https://github.com/twbs/bootstrap/issues/9689
Editar: a partir de Bootstrap 3.1 .col-xs-offset-* existe , vea bootstrap :: grid options
.col-xs-offset-* no existe. El desplazamiento y el orden de las columnas son solo pequeños y más. (SOLAMENTE .col-sm-offset-* , .col-md-offset-* y .col-lg-offset-* )
Consulte la documentación oficial: bootstrap :: grid options
El css bootstrap utilizado en el enlace jsfiddle, no tiene el css para col-xs-offset- *, por eso los css no se han aplicado. Consulte el último css de arranque.
El problema es que estás poniendo la clase .name en lugar de la clase de nombre
Esto fue realmente frustrante, así que escribí una idea que puedes tomar que permite col-offset-xs-* . También noté que Bootstrap SASS repo Bower instalado esta semana no incluía col-offset-sm-0 por lo que también se calza pero será redundante en muchos casos.
No funciona porque col-xs-offset-* se menciona fuera de la consulta de medios. si desea usarlo, debe 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 está bien, deberían mencionar col-xs-offset-* en la consulta de medios
Puede obtener el desplazamiento establecido solo para los dispositivos xs anulando los píxeles más altos con 0 offset. Al igual que,
class="col-xs-offset-1 col-md-offset-0"
Quita el punto delante de tu clase para que se vea así:
<div class="col-xs-2 col-xs-offset-1">col</div>
Según el último arranque, v3.3.7 xs-offseting está permitido. Consulte la documentación aquí compensación de arranque . Entonces puedes usar
<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
Solo en caso de que alguien cometa el mismo error que yo hice antes de tropezar en esta página, es decir, agregar reglas de restablecimiento de CSS (como el restablecimiento muy popular de Eric Meyer utilizado en millones de sitios web) después de incluir el arranque.
Además, tal vez debería señalar que tal reinicio no será necesario con bootstrap ya que bootsrap realmente implementa el reinicio de normalize.css v3.0.2 .
Una sugerencia para cuando quieres hacer un desplazamiento pero te encuentras incapaz en anchos extra pequeños:
Utilice .hidden-xs y .visible-xs para crear una versión de su bloque html para anchuras extrapequeñas, y una para todo lo demás (donde todavía puede usar una compensación)
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 manualmente el margen al mismo elemento. Por ejemplo
En el código anterior, no se aplicará el desplazamiento. En su lugar, se aplicará un margen de 0 automático
en lugar de usar col-md-offset-4, use offset-md-4, ya no tendrá 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.
/*
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;
}
}