Rimozione della grondaia di riempimento dalle colonne della griglia in Bootstrap 4

Question

Come si crea una griglia senza griglia nel bootstrap 4?

Esiste un'API ufficiale per rimuovere la grondaia o è manuale?

Answer 1

Bootstrap4: Viene fornito con .no-gutters fuori dalla scatola. fonte: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Richiede CSS personalizzato.

Stylesheet:

.row.no-gutters { 
    margin-right: 0; 
    margin-left: 0; 

    & > [class^="col-"], 
    & > [class*=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    } 
} 

quindi di utilizzare:

<div class="row no-gutters"> 
    <div class="col-xs-4">...</div> 
    <div class="col-xs-4">...</div> 
    <div class="col-xs-4">...</div> 
</div> 

Sarà:

• Rimuovere margine dalla fila
• Rimuovere imbottitura da tutte le colonne direttamente sotto il riga

Answer 2

È possibile utilizzare questo codice css per ottenere una griglia senza gutter in bootstrap.

.no-gutter.row, 
.no-gutter.container, 
.no-gutter.container-fluid{ 
    margin-left: 0; 
    margin-right: 0; 
} 

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

Answer 3

È possibile utilizzare il mixin make-col-ready e impostare la larghezza di rilegatura a zero:

@include make-col-ready(0);

Answer 4

hanno bisogno di un disegno da bordo a bordo? Lasciare il genitore .container o .container-fluid.

Ancora se è necessario rimuovere imbottitura da .row e colonne bambino immediati si deve aggiungere la classe .no-gutters con il codice @ Brian sopra al vostro file CSS, in realtà non è 'a destra, fuori dalla scatola', controllare qui per i dettagli ufficiali sulla versione finale di Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters