Bootstrap 4卡片组列计数并正确设置第一个和最后一个项目的边距

Question

我使用Bootstrap 4.我正在使用SCSS / SASS。

1. 如何正确指定卡片组的列数？我想要，例如3栏。
2. 然后如何正确设置第一个和最后 card的保证金？那么第一个card没有左边距而最后卡没有右边距？

因为现在它没有正确对齐。见图。



这是我的标记：

<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

您可以自定义.card-deck和.card的Flexbox。 如果您看到.card内的.card-deck有flex: 1 0 0%; 我们需要覆盖该规则并利用 flex-basis 。我们还需要覆盖边距。我是怎么用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});
         }
     }
 }

其中$cols是每个断点的列。

卡片以弹性为基础获得默认大小，并且“不会增长”。并且没有缩水＆＃39;使用速记（flex：＆＃39; flex-grow＆＃39;＆flex;＆＃39; flex-shrink＆＃39; flex-basis＆＃39;）。在父元素（.card-deck）上添加.justify-content-between以分配卡片之间的额外空间。

关于flexbox的一切我都是从guide读取的。