如何使 Bootstrap 4 卡组每行宽度相同？

我使用卡片组每行显示 4 张卡片：

<div class="row">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
</div>
...

每副牌中的牌宽度相同，但decks不是，即第二排的甲板比第一排的甲板宽。如何使甲板宽度相同？

我尝试过设置.card-decks{width: 100%;}，适用于整行，但会扭曲仅包含 1-2 张牌的行的牌。

附加CSS： 我的图像尺寸不同，这就是为什么我添加了以下 CSS 以使它们相同。其他 CSS 不应影响卡片：

.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat:   no-repeat;
background-size:     cover;
}

另外，我希望保持样式响应，因此希望避免硬编码像素集像素宽度。

不要放.card-deck in a .row. Only .col-列应放置在行中。..

内容必须放置在列内，并且只能放置列 行的直接子代。

你应该使用...

<div class="row">
 <div class="col-12">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
 </div>
</div>

问题的第二部分...

使用时card-deck (and card-group），卡片将始终填充下一个视觉行的宽度。如果每行的卡片少于 4 张，则剩余的卡片将填满整个宽度。要解决此问题，请为每张卡设置最大宽度。

.card-deck .card {
    max-width: calc(25% - 30px);
}

https://www.codeply.com/go/ygvZvjsELs https://www.codeply.com/go/ygvZvjsELs

或者，您可以使用网格列来包裹卡片。这里解释一下：Bootstrap 4 卡组，其列数基于视口 https://stackoverflow.com/questions/36430816/bootstrap-4-card-deck-with-number-of-columns-based-on-viewport