Voy a clarificar el tema del padding para las rejillas del Boostrap y poder identificar pequeños problemas que se repiten una y otra vez. Voy a partir de una plantilla vacía:

Plantilla básica
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prueba de bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>

</body>
</html>

Ahora añado un contenedor para incluir el contenido principal de la página. Esto me define un área limitada en entornos responsive:

1
2
3
4
5
6
<body>
<div class="container">
Contenedor
</div>
</body>

Si inspeccionamos la página podemos ver que el contenedor tiene un padding lateral de quince píxeles:

Si queremos usar columnas lo normal es organizarlas en filas usando la clase row. Para ello, voy a añadir una fila dentro del contenedor:

1
2
3
4
5
6
<div class="container">
Contenedor
<div class="row">
Fila dentro del contenedor
</div>
</div>

Si volvemos a inspeccionar la página, ahora veremos que la fila elimina el padding que nos había colocado el contenedor:

La clase row tiene un padding horizontal de -15px. ¿Por qué?

La respuesta está en que esta clase va a almacenar columnas (contenidos de bloque de clase clas-*), y las columnas tienen un padding de… ¡sorpresa! … quince píxeles. Esto significa que entre columnas hay una separación de 30 píxeles (quince por cada columna). En la imagen se ve mejor:

Claro, el tema es que la primera columna tiene un padding de quince píxeles a la izquierda que, sumados a los quince del contenedor, resultaría un margen de 30 píxeles en el documento a la izquierda, y lo mismo ocurre en el lado derecho con la última columna.

Para ello existe la clase row, para eliminar los márgenes de la primera y última columna.

Por concretar, tenemos tres organizadores:

  1. El contenedor principal que añade un padding de quince píxeles y delimita el espacio responsive.

  2. La fila, que incluye columnas y elimina el padding de la primera y última columna para que sean consistentes con el margen del contenedor principal

  3. Las columnas, que definen un margen lateral de quince píxeles resultando una separación entre columnas de treinta píxeles (quince para la columna de la derecha y quince para la de la izquierda).

Una vez tenemos claro lo que realiza cada clase, podemos identificar mejor ciertos errores que aparecen a la hora de maquetar usando las rejillas de Bootstrap:

Si utilizamos la clase row fuera de un contenedor, estaremos usando un margen de -15 píxeles, con lo que nos saldremos de los márgenes del documento principal y nos aparecerá el temido scroll horizontal no deseado (en móviles, el asunto es particularmente engorroso).

Si utilizamos las columnas sin una fila sumaremos el margen lateral de quince píxeles de la primera (o última) columna al margen lateral del contenedor, con lo que obtendremos unos márgenes laterales de treinta píxeles. El contenido lo tendremos muy separado del borde del documento.