Espaciado vertical para columnas Bootstrap

Problema

Mientras usaba Twitter Bootstrap, encontré algunos problemas de espaciado vertical cuando las columnas de Bootstrap comenzaron a apilarse. Por ejemplo, echemos un vistazo a un diseño de 3 columnas para pantallas de tamaño mediano.

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

Si una tableta o un teléfono visualizaran ese diseño, todas las columnas se apilarían, pero cada columna podría tocar directamente la columna anterior.

Una solución simple a esto es agregar un margen inferior a cada columna:

[class*="col-"] {
    margin-bottom: 15px;
}

Esto funciona bien en algunas situaciones, pero agrega un margen adicional innecesario cuando no es necesario.

Solución

Para resolver esto, podemos crear una nueva clase css que aplica el margen superior a las columnas cuando se apilan:

.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

@media (min-width: 1200px) {
    .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
}
@media (min-width: 992px) {
    .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
}
@media (min-width: 768px) {
    .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
}

La clase aplica un margen superior a las columnas que tienen una columna anterior. Las consultas de medios eliminan el margen superior cuando no es necesario.row-grid

En una nota relacionada, si desea agregar espacio vertical entre sus filas, agregue esta línea a su css:

.row-grid + .row-grid {
    margin-top: 15px;
}

Uso

Simplemente agregue la clase a las filas en las que desea habilitar el espaciado de columna vertical.row-grid

<div class="row row-grid">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>