Bootstrap 4 compteurs de cartes et décompte correct des marges premier et dernier article

Question

J'utilise Bootstrap 4. Et j'utilise SCSS/SASS.

1. Comment est-ce que je précise le nombre de colonnes pour mon jeu de cartes? Je veux par exemple 3 colonnes.
2. Et puis comment régler correctement la marge pour le d'abord et derniercard? Donc, le premier card n'a pas de marge gauche et la dernière carte n'a pas de marge de droite?

Parce que maintenant il n'est pas aligné correctement. Voir l'image

Ceci est mon balisage:

<div class="card-deck"> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title 1</h4> 
     <p class="card-text">This is a text</p> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title 2</h4> 
     <p class="card-text">This is a text</p> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title 3</h4> 
     <p class="card-text">This is a text</p> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title 4</h4> 
     <p class="card-text">This is a text</p> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title 5</h4> 
     <p class="card-text">This is a text</p> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title 6</h4> 
     <p class="card-text">This is a text</p> 
    </div> 
    </div> 
</div> 

Answer 1

Vous pouvez personnaliser les FlexBox de .card-deck et .card. Si vous voyez le .card à l'intérieur .card-deck a Nous devons remplacer cette règle et tirer parti de flex-basis. Nous devons également écraser les marges. Comment je l'ai fait avec SASS:

HTML:

<div class="card-deck justify-content-between" id="card-deck"> 
    <div class="card"> 
     <div class="card-block"> 
      <h4 class="card-title">Card title 1</h4> 
      <p class="card-text">This is a text</p> 
     </div> 
    </div> 
    ... 
</div> 

SCSS:

$cols: (sm: 2, md: 3, lg: 4, xl: 6) !default; 

#custom-card-deck .card { 
    margin: 0 0 $spacer 0; 

    @each $breakpoint in map-keys($cols) { 
     @include media-breakpoint-up($breakpoint) { 
      $col: map-get($cols, $breakpoint); 

      flex: 0 0 calc(#{percentage(1/$col)} - #{$spacer * ($col - 1)/ $col}); 
     } 
    } 
} 

où $cols sont les colonnes pour chaque point d'arrêt.

Les cartes ont la taille par défaut de flex-basis, 'no grow' et 'no shrink' utilisant la sténographie (flex: 'flex-shrink' 'flex-shrink' 'flex-basis'). Sur l'élément parent (.card-deck), ajoutez .justify-content-between pour répartir l'espace supplémentaire entre les cartes.

Tout à propos de flexbox j'ai lu à partir de ce guide.