web-dev-qa-db-fra.com

Suppression de la gouttière de remplissage des colonnes de la grille dans Bootstrap 4

Comment créer une grille sans gouttière dans bootstrap 4?

Existe-t-il une API officielle permettant de supprimer la gouttière ou s'agit-il d'un manuel?

twitter-bootstrapbootstrap-4
48
Blair Anderson

Bootstrap4: est livré avec .no-gutters prêt à l'emploi. source: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Requiert un CSS personnalisé.

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>

Ce sera:

  • Supprimer la marge de la ligne
  • Supprimer le remplissage de toutes les colonnes directement sous la rangée
79
Blair Anderson

Vous devez utiliser classes d'espacement bootstrap4 intégrées pour personnaliser l'espacement des éléments, c'est une méthode plus pratique.

8
sheetal

Besoin d'une conception bord à bord? Supprimez le parent .container ou .container-fluid.

Néanmoins, si vous devez supprimer le remplissage de .row et les colonnes enfants immédiates, vous devez ajouter la classe .no-gutters avec le code de @Brian ci-dessus à votre propre fichier CSS. ', vérifiez ici les détails officiels sur la version finale de Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

5
Iqtidar Ali

Vous pouvez utiliser ce code CSS pour obtenir une grille sans gouttière dans le 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;
}
1
canil

Vous pouvez utiliser le mixin make-col-ready et régler la largeur de la gouttière à zéro:

@include make-col-ready(0);

1
roNn23