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>