Come rimuovere lo spazio tra le colonne di bootstrap?

Voglio rimuovere lo spazio tra più colonne nella griglia di bootstrap. Come possiamo sovrascrivere i CSS di Bootstraps per ottenere questo compito o qualsiasi altra soluzione migliore con puro CSS?

main.html

// stuff here for this column
// stuff here for columns

aggiungi una class quando è necessario rimuovere gli spazi per usarla

 .padding-0{ padding-right:0; padding-left:0; } 

in html scrivi questa class

 
//stuff here for this column
//stuff here for columns

Puoi creare un no-gutter class per la tua row e rimuovere il margine / riempimento aggiunto da bootstrap, come suggerito in questo post :

 .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-right: 0; padding-left: 0; } .row > div { background: lightgrey; border: 1px solid; } 
  
1
2

In Bootstrap 4 , la class no-gutters è inclusa. Non è necessario alcun CSS aggiuntivo …

 
// stuff here for this column
// stuff here for columns

Nel Bootstrap 4 puoi aggiungere classi mx-* e px-*

 

Your content

Your content

Le classi di mx-* e px-* sono in stile bootstrap predefinito, quindi non è necessario aggiungerle manualmente

mx-* sta per margin-right: * più margin-left: * . Mentre px-* sta per riempimento a destra e a sinistra.

C’è anche my-* m-* mt-* mb-* mr-* ml-* e py-* p-* pt-* pb-* pr-* pl-* .

Sulle colonne c’è una imbottitura di 15px su entrambi i lati, se togli che dovrebbero sedersi insieme.

 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding-right: 0px; padding-left: 0px; } 

Questo snippet deriva dal codice modificato trovato in grid-framework.less.

Vorrei aggiungere una class alla riga e indirizzare i figli della colonna con un selettore di caratteri jolly discendenti:

HTML:

 
//stuff here for this column
//stuff here for columns

CSS:

 .nopadding > div[class^="col-"] { padding-right: 0; padding-left: 0; } 

Se stai usando MENO puoi usare lo snippet e applicarlo alla riga.

 .no-gutter { [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } 

Se normale CSS

 .no-gutter > [class*="col-"]{ } 

Così:

 
//stuff here for this column
//stuff here for columns

La soluzione di Anshuman funziona davvero! Elimina gli spazi delle colonne di bootstrap quando si imposta il padding a zero negli stili, ovvero padding: 0;

 
//html code here..
//html code here..

Semplice aggiungere .no-grondaia sulla riga.

https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

 
//stuff here for this column
//stuff here for columns