如何在 Bootstrap 4 中创建具有可变卡片宽度的响应式卡片组？

具有可变卡片宽度的 Bootstrap 4 Card-Deck

问题：

Bootstrap 4 的卡片-deck 功能将卡片并排对齐，但无论视口大小如何，所有卡片都具有相同的宽度。这可能会导致较窄屏幕上的呈现效果不佳。

解决方案：

要根据视口大小创建具有不同卡片宽度的响应式卡片组，您可以实现以下步骤：

1.消除 Card-Deck 的使用：

card-deck 类使用表格单元格布局，这限制了灵活性。相反，请使用网格列类（例如 col-sm-4、col-lg-2）来定义卡片宽度。

2。启用 Flexbox：

Bootstrap 4 Alpha 6 及更高版本默认使用 Flexbox。但是，如果您使用的是早期版本，则可能需要使用以下 CSS 手动启用它：

.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}

3.设置卡片高度：

为了确保所有卡片具有相同的高度，请为每张卡片添加 h-100 类：

<div class="card h-100">
  ...
</div>

4。响应断点：

使用 col-- 类为特定视口尺寸（即屏幕宽度）定义不同的卡片宽度：

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

示例代码：

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

此解决方案允许您创建一个响应式卡片组，根据视口大小调整大小，确保您的布局适应不同的屏幕。

以上是如何在 Bootstrap 4 中创建具有可变卡片宽度的响应式卡片组？的详细内容。更多信息请关注PHP中文网其他相关文章！