Adicionar espaçamento entre colunas empilhadas verticalmente no Bootstrap 4

Question

Apr 04, 2017, 03:08 PM

bootstrap-4 html5 twitter-bootstrap-4 css3 spacing

Adicionar espaçamento entre colunas empilhadas verticalmente no Bootstrap 4

Infelizmente, não parece haver uma boa maneira de gerenciar o espaçamento vertical entre colunas que passam de uma pilha horizontal para uma pilha vertical em determinados pontos de interrupção. Parece haver umsolução quando um formulário está envolvido, mas essa não é a situação aqui. Eu tenhotentei esta solução, mas não funciona quando há várias colunas agrupadas em uma linha.

Para ilustrar meu cenário, aqui está a estrutura do meu HTML:

<body>

  <div class="container">

    <div class="row">

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

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

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

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

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

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

    </div>

  </div>

</body>

https://jsfiddle.net/b74a3kbs/6/

No tamanho médio do dispositivo (md) e acima, gostaria que houvesse espaçamento entre as duas "linhas" das colunas, mas nenhum espaçamento acima da "primeira linha" de 3 colunas e nenhum abaixo da "segunda linha" de 3 colunas. Quando as colunas empilham verticalmente abaixo do tamanho do dispositivo médio (md), eu gostaria que houvesse espaçamento entre cada uma das colunas, mas nenhuma acima do primeiro filho e nenhuma abaixo do último filho.

Idealmente, a solução funcionaria independentemente de quantas colunas (por exemplo, 3, 5, 6, 12) estão contidas na linha.