iberck
4/20/2016 - 8:18 PM

Bootstrap grid system

Bootstrap grid system

Resoluciones de pantalla

Existen 4 en bootstrap:

xs: dispositivos móviles
sm: tablets
md: laptops
lg: desktops

Más de 12 columnas por fila

Si más de 12 columnas son puestas dentro de la misma fila, cada grupo de columnas extra será puesto dentro de una nueva línea.

http://getbootstrap.com/css/#grid-example-wrapping

Valores por defecto en tamaños de pantalla no definidos

Las clases grid para un tamaño de pantalla específico, aplican para ese tamaño de pantalla y para los tamaños de pantalla más grandes a menos que se indique lo contrario explicitamente. Para los tamaños de pantalla inferiores toma por defecto el valor de 1 columna, por ejemplo si no se define xs tomará por defecto: col-xs-12.

En el siguiente ejemplo se definen 2 columnas para tamaños de pantalla sm, por lo tanto los tamaños de pantalla md y lg tendrán 2 columnas:

Si no se definen los tamaños de pantalla inferiores al definido en la columna (en este caso xs), toma por defecto 1 columna (col-xs-12)

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            col 1
        </div>
        <div class="col-sm-6">
            col 2
        </div>
    </div>
</div>

Resultado para pantallas sm,md y lg:

--------------------------
|           |            |
|           |            |
|           |            |
|           |            |
|           |            |
--------------------------

Resultado para pantallas xs:

--------------------------
|                        |
|                        |
|------------------------|
|                        |
|                        |
--------------------------

https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

http://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap