Serkronyx
4/20/2016 - 8:23 PM

Columnas de Bootstrap3

Columnas de Bootstrap3

Columnas de Bootstrap

Las rejillas que maneja boostrap por defaul son de 12 columnas(row) y las puedes manejar en diferentes tamaños como son col-xs,col-sm,col-md,col-ld pero que pasa cuando uno las declaras sin ningun orden ¿Qué pasa con los demas valores?

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

En este ejemplo podemos ver que las columnas tiene un tamaño sm de 6 las por lo que se represantarian de la siguente manera

Pantalla col-sm-6

    6 columnas        6 columnas 
|_________________|_________________|      
|                 |                 |
|                 |                 |
|                 |                 |
|                 |                 |
|                 |                 |
|                 |                 |
|                 |                 |
|                 |                 |
|                 |                 |
|_________________|_________________|
|             12 columnas           |

Pero como sabemos boortrap maneja col-xs,col-sm,col-md,col-ld si nada mas declaramos la sm que pasa con las demas.

Lo que se hace es que los tamaños de pantalla siguientes como md y lg tomaran el valor del sm que es el ultimo col que tiene valor

Y en el caso de xs lo que se hace es que toma por defecto el valor de las 12 columnas, esto pasa cuando no declaras los valores que decees que tome pero siempre de lg hacia sm

Pantalla col-xs-12

|___________________________________|_      
|                                   |
|                                   |
|                                   |
|                                   |
|___________________________________|
|                                   |
|                                   |
|                                   |
|                                   |
|___________________________________|_
|             12 columnas           |

Desbordamiento de las Columnas

Bootstrap solo cuenta con 12 columnas como ya lo habiamos mencionado pero puede llegar el caso en el que se desborden las mismas como en el ejemplos sig

    <div class="col-sm-6">
    </div>
    <div class="col-sm-8">
    </div>

Ya que boostrap lo que hace en estos casos es ampliar un poco la columna en la que estamos y agregarla como si fuera un enter y de esta manera poder ponerla

Pantalla col-sm-6

           
|_________________|_________________|      
|                 | ESTA PATRTE     |
|                 |QUEDA BASIA      |
|    6 columnas   |                 |
|                 |                 |
|_________________|_________________|
|                           |       |
|                           |       |
|   8 columnas              |Basio  |
|                           |       |
|___________________________|_______|
|             12 columnas           |