Añadir espacio entre columnas astackdas verticalmente en Bootstrap 4

Desafortunadamente, no parece haber una buena manera de administrar el espaciado vertical entre columnas que pasan de una stack horizontal a una stack vertical en ciertos puntos de corte. Parece que hay una solución cuando se trata de un formulario , pero esa no es la situación aquí. Intenté esta solución , pero no funciona cuando hay varias columnas que se envuelven en una fila.

Para ilustrar mi escenario, aquí está la estructura de mi HTML:

 
col 1
col 2
col 3
col 4
col 5
col 6

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

En el tamaño de dispositivo mediano (md) y superior, me gustaría que haya espacio entre las dos “filas” de columnas, pero sin espacios por encima de la “primera fila” de 3 columnas y ninguna debajo de la “segunda fila” de 3 columnas Cuando las columnas se acumulan verticalmente por debajo del tamaño del dispositivo mediano (md), me gustaría que haya espacio entre cada una de las columnas, pero ninguna encima del primer niño y ninguna debajo del último niño.

Idealmente, la solución funcionaría independientemente de cuántas columnas (por ejemplo, 3, 5, 6, 12) están contenidas dentro de la fila.

Use las nuevas utilidades de espacio Bootstrap 4. Por ejemplo, mb-3 agrega margen inferior de 1rem .
No se necesita CSS adicional.

http://www.codeply.com/go/ECnbgvs9Ez

 
col 1
col 2
col 3
col 4
col 5
col 6

Las utilidades de espaciado son receptivas, por lo que puede aplicarlas para puntos de corte específicos (es decir; mb-0 mb-md-3 )

Si desea una solución CSS , use la solución explicada en la pregunta 3.x relacionada ( no depende de usar un formulario): https://jsfiddle.net/zdLy6jb1/2/

 /* css only solution */ [class*="col-"]:not(:last-child){ margin-bottom: 15px; } 

Nota: el col-lg-4 es extraño en su marcado desde col-lg-4 col-md-4 ,
es lo mismo que col-md-4 .

vea el fragmento debajo o jsfiddle

Funcionará independientemente de cuántos cols tienes o filas

primero (en pantalla grande) todas las filas tienen margin-bottom excepto la última y luego en pantalla mediana, las filas no tendrán ningún margen y las columnas tendrán margen inferior excepto el último collado de la última fila

 .row { margin-bottom:30px; } .row:last-child{ margin-bottom:0; } .row [class*="col-"] { border:1px solid red; } @media only screen and (max-width: 768px) { .row { margin:0 } .row [class*="col-"] { margin-bottom:30px; } .row:last-child [class*="col-"]:last-child{ margin-bottom:0; } } 
  

hey

col 1
col 2
col 3
col 4
col 5
col 6

Así es como terminé haciendo este trabajo:

 .row [class*="col-"] { @extend .mb-4; &:last-child { @extend .mb-0; } @extend .mb-md-5; &:nth-last-of-type(1), &:nth-last-of-type(2), &:nth-last-of-type(3) { @extend .mb-md-0; } }