Pas d'espace entre les colonnes grâce au système Flex Box Grid

Je n'ai pas utilisé ce système de grille, mais je peux voir en inspectant les éléments dans les outils de développement de mon navigateur que l'espace entre les éléments est créé avec les propriétés padding-right et padding-left. Vous pouvez essayer d'ajouter un autre nom de classe à vos éléments imbriqués, et écrire des règles pour cette classe qui remplacent les balises padding-right et padding-left.

Le css ressemblerait à ceci. Votre sélecteur doit avoir une spécificité plus élevée que les sélecteurs appliqués par Flex Box Grid System. Si vous avez besoin d'en savoir plus sur la spécificité, voici un bon guide: https://stuffandnonsense.co. uk / archives / css_specificity_wars.html

<div class="container">
    <div class="row">
        <div class="noPadding col-md-6">
            col 1
        </div>
        <div class="noPadding col-md-6">
            col 2
        </div>
    </div>
</div>

Le code HTML ressemblerait à ceci:

.container .row .noPadding {
    padding-right: 0;
    padding-left: 0;
}

Alternativement, vous pouvez vous abstenir d'appliquer des classes du système de grille Flex Box sur les deux éléments que vous ne voulez pas espacer et utiliser simplement la propriété flex de la spécification css. Voici un guide concis de css flex: https: // css- tricks.com/snippets/css/a-guide-to-flexbox/

Une façon est d'utiliser la classe child-no-padding dans la row div:

<div class="container">
  <div class="row child-no-padding">
    <div class="col-2">
      col 1
    </div>
    <div class="col-2">
      col 2
    </div>
    <div class="col-2">
      col 3
    </div>
    <div class="col-2">
      col 4
    </div>
    <div class="col-2">
      col 5
    </div>
    <div class="col-2">
      col 6
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

De cette façon, vous empêchez à partir du nom de classe répétitif no-padding dans les éléments enfants.

Exemple:

.child-no-padding>div {
  padding: 0 !important;
}

.col-2{
    background: #00fff5; border: 1px solid #6cccca; text-align:center; font-size:.8em; color:white;
}

.child-no-padding>div {
  padding: 0 !important;
}

Deux options:

1) Si vous devez supprimer globalement l'espacement ligne-colonne (gouttières)

Vous pouvez directement modifier le : root dans flexboxgrid.css ou remplacez-les dans votre fichier css personnalisé.

<div class="container">
    <div class="row no-gutters">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>

2) Vous pouvez utiliser une classe utilitaire, si vous avez besoin de supprimer l'espacement uniquement dans une section spécifique

En empruntant le concept de Bootstrap , vous pouvez simplement ajoutez une classe qui supprime la marge négative de .row et le remplissage de .col-*,

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

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

Puis ajoutez .no-gutters classe avec .row.

:root {
    --gutter-compensation: 0; // remove negative margins for row
    --half-gutter-width: 0; // remove padding from columns
}