Tutorial #8 del curso de BootStrap 3.2, en este tutorial seguimos viendo las clases extra del sistema de grillas en este caso Clearfix que nos permite ordenar mejor el contenido desigual en una grilla, y offset nos permite recorrer una determinada cantidad de columnas hacia la derecha la cantidad de espacions necesarios, creando espacion vacios ideal para alinear un determinado contenido estas clases pueden ser combinadas con las diferentes resoluciones.
Código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Grilla - clearfix</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3 well">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T.</div> <div class="col-xs-6 col-sm-3 well">.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3 well">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3 well">.col-xs-6 .col-sm-3</div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Grilla offset</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 well">.col-md-4</div> <div class="col-md-4 col-md-offset-4 well">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3 well">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3 well">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 well">.col-md-6 .col-md-offset-3</div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>