Bootstrap 4 card-deck column count 并正确设置 margin first 和 last item

Question

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

如何正确指定卡片组的列数？我想要例如3 列。
然后如何正确设置 first 和 last 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-deck 里面的 .card 有 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 是每个断点的列。

卡片从 flex-basis、'no grow' 和 'no shrink' 使用 shorthand 获取默认大小（flex: 'flex-grow' 'flex-shrink' 'flex-basis'） .在父元素 (.card-deck) 上添加 .justify-content-between 以在卡片之间分配额外的 space。

我从这篇 guide.

中读到了关于 flexbox 的所有内容

Bootstrap 4 card-deck column count 并正确设置 margin first 和 last item

Bootstrap 4 card-deck column count and correctly set margin first and last item

sass

twitter-bootstrap-4