Bootstrap – Come rimuovere la grondaia tra le colonne

Non so se è il modo giusto come farlo, ma come posso rimuovere la grondaia 30px tra le colonne? Ma senza margine-sinistra: -30px set.

Un modo migliore per rimuovere il riempimento delle colonne è aggiungere una class .no-pad al tuo .row :

  

… e poi aggiungi questo CSS.

 .row.no-pad { margin-right:0; margin-left:0; } .row.no-pad > [class*='col-'] { padding-right:0; padding-left:0; } 

È una ctriggers idea cercare gli oggetti first- e last-child quanto in realtà il .row è pensato per occuparsi di quegli offset a destra e sinistra del viewport. Con il metodo sopra tutti i .col-* rimangono identici, il che è anche molto più semplice se si considera la reattività, specialmente l’impilamento a dimensioni mobili (prova la mia demo sotto la dimensione md ).

Il selettore CSS diretto-discendente > significa che il .no-pad verrà applicato solo al figlio .col s, in modo da poter eseguire il riempimento su strutture di colonne nidificate successivamente (o meno) se lo si desidera.

Anche usando il selettore di attributo [class*='col-'] significa che ogni colonna non ha bisogno di aggiungere classi extra non Bootstrap.

Ecco una demo: http://www.bootply.com/Ae3xTyAW5D

Aggiornamento 2018

Bootstrap 4 ora include una class .no-gutters che puoi semplicemente aggiungere al .row .

  
x
x
x

Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD


I grondaie Bootstrap 3 vengono creati usando il padding. È inoltre necessario regolare il margine negativo in modo che la spaziatura intorno alle colonne esterne non venga effettuata.

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

Basta aggiungere la class no-gutter al .row .

Demo: http://bootply.com/107458


Invece di applicare correzioni difficili da mantenere, ti suggerisco di creare la tua versione personalizzata di Bootstrap dal Customizer in cui puoi impostare la grondaia in base alle dimensioni desiderate (o rimuoverla totalmente, impostandola su 0).