/ / ¿Por qué mi marca de 12 columnas no se ajusta a la resolución md? - twitter-bootstrap, twitter-bootstrap-3

¿Por qué mi marca de 12 columnas no se ajusta a la resolución md? - twitter-bootstrap, twitter-bootstrap-3

Tuve una bonita cuadrícula de 12 columnas con column-md-* clases Entonces decidí hacer que la página se vea mejor en el sm tamaño, así que agregué algunos column-sm-* Clases a mis divs.

Después de eso todo se comporta de forma extraña. md y lg resoluciones

Aquí está el código: http://bootply.com/105536

Hay dos filas, una es "después de agregar clases de sm" y la segunda es "antes", y se ve bien en las medianas y grandes.

Por qué el sm las clases arruinan el md ¿cuadrícula?

Respuestas

1 para la respuesta № 1

Las clases de grilla se aplican a dispositivos con anchos de pantallamayor o igual que los tamaños de punto de interrupción, y anular las clases de cuadrícula dirigidas a dispositivos más pequeños. Por lo tanto, la aplicación de cualquier clase .col-md a un elemento no solo afectará su estilo en dispositivos medianos, sino también en dispositivos grandes si no existe una clase .col-lg. http://getbootstrap.com/css/#grid

por lo que necesita anular col-sm-offset-1, me gusta

<div class="col-md-3 col-sm-6 col-sm-offset-1 col-md-offset-0">