twitter-bootstrap-3 - div - offset bootstrap 3

Bootstrap 3: Offset no funciona?

Question

Tengo este codigo

<div class="row">
<div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
<div class="col-sm-3 col-md-12"></div>
</div>

Lo que quiero para pantallas pequeñas (sm) es tener dos divs que tengan tres columnas cada una y un desplazamiento de 6 columnas para la primera div.

Para pantallas medianas (md), me gustaría tener dos divs con doce columnas cada una (una apilada horizontalmente debajo de la otra), sin desplazamientos.

De alguna manera el navegador no reconoce la clase col-md-offset-0 . Todavía utiliza la clase col-sm-offset-6 . ¿Alguna idea de por qué?

Answer 1

¿Qué versión de bootstrap estás usando? Las versiones anteriores de Bootstrap 3 (3.0, 3.0.1) no funcionaban con esta funcionalidad.

col-md-offset-0 debería estar funcionando como se ve en este ejemplo de rutina de carga que se encuentra aquí ( http://getbootstrap.com/css/#grid-responsive-resets ):

<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

Answer 2

No hay col - ?? - offset-0. Todas las "filas" suponen que no hay desplazamiento a menos que se haya especificado. Creo que quieres 3 filas en una pantalla pequeña y 1 fila en una pantalla mediana.

Para obtener el resultado, creo que estás buscando, intenta esto:

<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
</div>
</div>

Tenga en cuenta que solo verá una diferencia en una tableta pequeña con lo que describió. Pantallas medianas, grandes y extra pequeñas, las columnas abarcan 12.

Espero que esto ayude.

Answer 3

Si te entiendo bien, quieres algo que parece ser lo contrario de lo que se desea normalmente: quieres un diseño horizontal para pantallas pequeñas y elementos apilados verticalmente en pantallas grandes. Puedes lograr esto de una manera como esta:

<div class="container">
<div class="row">
<div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
<div class="hidden-md hidden-lg col-xs-3">b</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm">c</div>
</div>
</div>

En pantallas pequeñas, es decir, xs y sm, esto genera una fila con dos columnas con un desplazamiento de 6. En pantallas más grandes, es decir, md y lg, genera dos elementos apilados verticalmente en todo el ancho (12 columnas).