Entfernen von Polsterungsrinnen aus Rasterspalten in Bootstrap 4

Question

Wie erstellt man ein rinnenloses Raster in Bootstrap 4?

Gibt es eine offizielle API zum Entfernen der Gosse oder ist es manuell?

Answer 1

Bootstrap4: Kommt mit .no-gutters aus der Box. Quelle: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Benötigt CSS Brauch.

Sheet:

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

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

Dann zu verwenden:

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

Es wird:

• entfernen Marge aus der Reihe
• Entfernen Polsterung aus allen Spalten direkt unter der Reihe

Answer 2

Sie können diesen CSS-Code verwenden, um gutterless Grid im Bootstrap zu bekommen.

.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

können Sie die mixin verwenden make-col-ready und stellen Sie die Stegbreite auf Null:

@include make-col-ready(0);

Answer 4

ein Edge-to-Edge-Design für ein Produkt? Löschen Sie die übergeordneten Elemente .container oder .container-fluid.

Dennoch, wenn Sie Polsterung aus .row und sofort Kind Spalten müssen Sie fügen Sie die Klasse .no-gutters mit dem Code von @ Brian oben auf Ihre eigene CSS-Datei entfernen müssen, es ist eigentlich nicht das Recht aus dem Kasten heraus ", Überprüfen Sie hier für offizielle Details zum endgültigen Bootstrap 4 Release: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters