Bootstrap Grid - Medium Devices

Bootstrap cuadrícula Ejemplo: Dispositivos Mediano

En el capítulo anterior, presentamos un ejemplo de rejilla con las clases de dispositivos pequeños. Se han utilizado dos divs (columnas) y les dimos un 25%/75% por partes:

Pero en los dispositivos medianas el diseño puede ser mejor como un 50%/50% de división.

Consejo: Medium dispositivos se definen por tener un ancho de pantalla de 992 píxeles a 1199 píxeles.

Para los dispositivos medianas usaremos los .col-md-* clases.

Ahora vamos a añadir los anchos de columna para dispositivos medianas:

Ahora Bootstrap va a decir "por el pequeño tamaño, mira a clases con -sm- en ellos y utilizar esos. En el mediano, mirar a las clases con -md- en ellos y utilizar los".

El siguiente ejemplo se traducirá en una 25%/75% dividida en dispositivos pequeños y un 50%/50% dividida en dispositivos medianas (y grandes). En los dispositivos adicionales pequeños, se apilan automáticamente (100%):

Sólo usando Medio

En el siguiente ejemplo, que sólo se especifican los .col-md-6 clase (sin .col-sm-* ). Esto significa que los dispositivos de medianas y grandes se dividirán 50%/50% - porque la clase se amplía hasta. Sin embargo, para dispositivos pequeños, será apilar verticalmente (ancho 100%):

El siguiente capítulo se muestra cómo agregar un porcentaje de división diferente para dispositivos de gran tamaño.