Tres columnas iguais

Obtén tres columnas de igual ancho comezando en escritorios e escalando a escritorios grandes . En dispositivos móbiles, tabletas e abaixo, as columnas apilaranse automaticamente.

.col-md-4
.col-md-4
.col-md-4

Tres columnas desiguais

Obtén tres columnas comezando en escritorios e escalando a escritorios grandes de varios anchos. Lembra que as columnas da grella deberían sumar doce para un só bloque horizontal. Ademais, as columnas comezan a apilarse sen importar a ventana gráfica.

.col-md-3
.col-md-6
.col-md-3

Dúas columnas

Obtén dúas columnas comezando en escritorios e escalando a escritorios grandes .

.col-md-8
.col-md-4

Ancho total, columna única

Non son necesarias clases de cuadrícula para elementos de ancho completo.


Dúas columnas con dúas columnas aniñadas

Segundo a documentación, a anidación é sinxela: basta con poñer unha fila de columnas dentro dunha columna existente. Isto dálle dúas columnas que comezan en escritorios e escalan a escritorios grandes , con outras dúas (anchuras iguais) dentro da columna máis grande.

En tamaños de dispositivos móbiles, tabletas e inferiores, estas columnas e as súas columnas aniñadas apilaranse.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixto: móbil e escritorio

O sistema de cuadrícula Bootstrap 3 ten catro niveis de clases: xs (teléfonos), sm (tabletas), md (escritorios) e lg (escritorios máis grandes). Podes usar case calquera combinación destas clases para crear deseños máis dinámicos e flexibles.

Cada nivel de clases amplía a escala, é dicir, se planeas establecer os mesmos anchos para xs e sm, só tes que especificar xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixto: móbil, tableta e escritorio

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Limpeza de columnas

Flotadores claros en puntos de interrupción específicos para evitar envolver incómodos con contido desigual.

.col-xs-6 .col-sm-3
Cambia o tamaño da túa ventana gráfica ou compróbaa no teu teléfono para ver un exemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Restablecementos de compensación, empuxe e tracción

Restablece os desplazamentos, empuxóns e tiros en puntos de interrupción específicos.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0