Enlèvement de la rigole de remplissage des colonnes de la grille dans le Bootstrap 4
comment créer une grille sans gouttière dans bootstrap 4?
Existe-t-il une API officielle pour enlever la gouttière ou est-elle manuelle?
5 réponses
Bootstrap4:
Vient avec .no-gutters hors de la boîte.
source:https://github.com/twbs/bootstrap/pull/21211/files
Bootstrap3:
nécessite des CSS personnalisés.
feuille de style:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
& > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
Puis utiliser:
<div class="row no-gutters">
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
</div>
à:
- Supprimer la marge de la ligne
- enlever le rembourrage de toutes les colonnes directement sous la rangée
Vous devez utiliser classes d'espacement bootstrap4 intégrées pour personnaliser l'espacement des éléments, c'est une méthode plus pratique .
besoin d'une conception de bord à bord? Déposer le parent
.containerou.container-fluid.
Encore si vous avez besoin de retirer le rembourrage de .row et colonnes enfants immédiats vous devez ajouter la classe .no-gutters avec le code de @Brian ci-dessus pour votre propre fichier CSS, en fait ce N'est pas 'right out of the box', cochez ici pour les détails officiels sur la version finale de Bootstrap 4:https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Vous pouvez utiliser ce code css pour obtenir gutterless grid dans 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;
}
Vous pouvez utiliser le mixin make-col-ready et définissez la largeur de gouttière à zéro:
@include make-col-ready(0);