Question

我使用卡片组每行显示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>
...

每个牌组内的牌是相同的宽度，但牌组不是，即第2排的牌组比第1排的牌组宽。如何让甲板宽度相同？

我尝试设置.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;
}

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

Answer 1

不要将.card-deck放入.row。 只应将.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（和card-group）时，卡片将始终填充下一个视觉行的宽度。如果每行少于4张卡片，剩余的卡片将填充整个宽度。要解决此问题，请为每张卡设置最大宽度..

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

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

或者，您可以使用网格列来包装卡片。这在此解释：Bootstrap 4 card-deck with number of columns based on viewport

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

1 个答案: