He tenido problemas similares con el espacio entre columnas. El problema raíz es que las columnas en bootstrap 3 y 4 usan relleno en lugar de margen. Entonces los colores de fondo para dos columnas adyacentes se tocan entre sí.
Encontré una solución que se ajusta a nuestro problema y que probablemente funcionará para la mayoría de las personas que intentan espaciar columnas y mantener el mismo ancho de canal que el resto del sistema de cuadrícula.
Este fue el resultado final al que íbamos
Tener la brecha con una sombra paralela entre columnas fue problemático. No queríamos espacio extra entre columnas. Solo queríamos que las canaletas fueran "transparentes" para que el color de fondo del sitio apareciera entre dos columnas blancas.
este es el marcado para las dos columnas
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
Este enfoque requiere un div interno con márgenes negativos al igual que la rutina de arranque de clase "fila". Y este div, lo llamamos "bloque elevado", debe ser el hermano directo de una columna
De esta manera, aún obtienes el relleno adecuado dentro de tus columnas. He visto soluciones que parecen funcionar mediante la creación de espacio, pero desafortunadamente las columnas que crean tienen un relleno adicional a cada lado de la fila, por lo que termina haciendo que la fila sea más delgada para lo que se diseñó la cuadrícula. Si observa la imagen para obtener el aspecto deseado, esto significaría que las dos columnas juntas serían más pequeñas que la más grande en la parte superior, lo que rompe la estructura natural de la cuadrícula.
El principal inconveniente de este enfoque es que requiere un marcado adicional que envuelve el contenido de cada columna. Para nosotros esto funciona porque solo columnas específicas necesitan espacio entre ellas para lograr el aspecto deseado.