Espaçamento vertical para colunas de bootstrap

Problema

Ao usar o Twitter Bootstrap, encontrei alguns problemas de espaçamento vertical quando as colunas do bootstrap começaram a se empilhar. Por exemplo, vamos dar uma olhada em um layout de 3 colunas para telas de tamanho médio.

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

Se um tablet ou telefone visualizasse esse layout, todas as colunas seriam empilhadas, mas cada coluna pode estar tocando diretamente a coluna anterior.

Uma solução simples para isso é adicionar uma margem inferior a cada coluna:

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

Isso funciona bem para algumas situações, mas adiciona margem extra desnecessária quando não é necessário.

Solução

Para resolver isso, podemos criar uma nova classe css que aplica a margem superior às colunas quando elas são empilhadas:

.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;
    }
}

A classe aplica uma margem superior às colunas que possuem uma coluna anterior. As consultas de mídia então removem a margem superior quando não é necessária.row-grid

Em uma observação relacionada, se você quiser adicionar espaçamento vertical entre as linhas, adicione esta linha ao seu css:

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

Uso

Basta adicionar a classe às linhas onde deseja ativar o espaçamento vertical das colunas.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>