Ho avuto problemi simili con lo spazio tra le colonne. Il problema alla radice è che le colonne in bootstrap 3 e 4 usano il padding invece del margine. Quindi i colori di sfondo per due colonne adiacenti si toccano.
Ho trovato una soluzione adatta al nostro problema e molto probabilmente funzionerà per la maggior parte delle persone che cercano di spaziare le colonne e mantenere le stesse larghezze di grondaia del resto del sistema a griglia.
Questo era il risultato finale che stavamo cercando
Avere il divario con un'ombra discendente tra le colonne era problematico. Non volevamo più spazio tra le colonne. Volevamo solo che le grondaie fossero "trasparenti" in modo che il colore di sfondo del sito apparisse tra due colonne bianche.
questo è il markup per le due colonne
<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;
}
Questo approccio richiede un div interno con margini negativi proprio come usa il bootstrap della classe "row". E questo div, lo abbiamo chiamato "blocco rialzato", deve essere il fratello diretto di una colonna
In questo modo si ottiene ancora un'imbottitura adeguata all'interno delle colonne. Ho visto soluzioni che sembrano funzionare creando spazio, ma sfortunatamente le colonne che creano hanno un'imbottitura extra su entrambi i lati della riga, quindi finisce per rendere la riga più sottile per cui è stato progettato il layout della griglia. Se guardi l'immagine per l'aspetto desiderato, ciò significherebbe che le due colonne insieme sarebbero più piccole di quella più grande in cima che rompe la struttura naturale della griglia.
Il principale svantaggio di questo approccio è che richiede un markup aggiuntivo che avvolge il contenuto di ciascuna colonna. Per noi questo funziona perché solo colonne specifiche avevano bisogno di spazio tra loro per ottenere l'aspetto desiderato.