Ejemplos de cuadrícula Bootstrap
A continuación, hemos recopilado algunos ejemplos de diseños de cuadrícula básicos de Bootstrap.
tres columnas iguales
El siguiente ejemplo muestra cómo obtener tres columnas de igual ancho comenzando en tabletas y escalando a escritorios grandes. En los teléfonos móviles, las columnas se apilarán automáticamente:
Ejemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Tres columnas desiguales
El siguiente ejemplo muestra cómo obtener tres columnas de varios anchos comenzando en tabletas y escalando a escritorios grandes:
Ejemplo
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dos columnas desiguales
El siguiente ejemplo muestra cómo obtener dos columnas de varios anchos comenzando en tabletas y escalando a escritorios grandes:
Ejemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Sin canaletas
Usa la .row-no-guttersclase para eliminar los canalones de una fila y sus columnas:
Ejemplo
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dos columnas con dos columnas anidadas
El siguiente ejemplo muestra cómo obtener dos columnas comenzando en tabletas y escalando a computadoras de escritorio grandes, con otras dos columnas (anchos iguales) dentro de la columna más grande (en teléfonos móviles, estas columnas y sus columnas anidadas se apilarán):
Ejemplo
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Mixto: móvil y escritorio
El sistema de cuadrícula Bootstrap tiene cuatro clases: xs (teléfonos), sm (tabletas), md (equipos de escritorio) y lg (equipos de escritorio más grandes). Las clases se pueden combinar para crear diseños más dinámicos y flexibles.
Sugerencia: cada clase se amplía, por lo que si desea establecer los mismos anchos para xs y sm, solo necesita especificar xs.
Ejemplo
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Consejo: recuerda que las columnas de la cuadrícula deben sumar doce por fila. Más que eso, las columnas se apilarán sin importar la ventana gráfica.
Mixto: móvil, tableta y escritorio
Ejemplo
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Flotadores transparentes
Borre los flotadores (con la .clearfixclase) en puntos de interrupción específicos para evitar envoltorios extraños con contenido irregular:
Ejemplo
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Columnas de compensación
Mover columnas a la derecha usando .col-md-offset-*clases. Estas clases aumentan el margen izquierdo de una columna en * columnas:
Ejemplo
<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">
</div>
Empujar y tirar: cambiar el orden de las columnas
Cambie el orden de las columnas de la grilla con .col-md-push-*y
.col-md-pull-*clases:
Ejemplo
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>