如何创建具有基于视口的列数的响应式 Bootstrap 4 Card-Deck？

基于视口的列数的 Bootstrap 4 Card-Deck

在 Bootstrap 4 中实现卡片组来对齐相同高度的卡片可能具有挑战性，特别是在考虑响应式时设计。默认情况下，Bootstrap 4 的卡片组将卡片分布在四列中，无论视口大小如何。

问题分解

当您希望卡片在不同视口中保持一致的外观时，就会出现此问题尺寸。 Bootstrap 4 中的默认设置不考虑最小卡片大小，也不考虑视口类对卡片组行为的影响。

Bootstrap 4 版本 4.1 的响应式解决方案

创建响应式卡片组根据视口大小调整列数，您可以利用 Bootstrap 4 中引入的可见性实用程序。通过在特定断点上设置特定列的可见性，您可以强制换行并创建所需的布局。

适用于早期 Bootstrap 4 版本的 Flexbox 解决方案

对于 4.1 之前的 Bootstrap 4 版本，您可以使用网格 col-* 类来控制卡片宽度。但是，这需要额外的 CSS 代码段来启用 Flexbox 并确保列的高度相等。

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

全高响应式 Card-Deck（Bootstrap 4 Alpha 6 及更高版本）

Bootstrap 4 Alpha 6及更高版本默认启用flexbox。因此，您可以利用 h-100 等级将卡设置为全高。这种方法不需要额外的 CSS 来处理 Flexbox 行为。

总之，通过根据您正在使用的 Bootstrap 4 版本采用适当的技术，您可以实现具有所需效果的响应式卡片组。列计数并在不同的视口大小中保持一致的外观和感觉。

以上是如何创建具有基于视口的列数的响应式 Bootstrap 4 Card-Deck？的详细内容。更多信息请关注PHP中文网其他相关文章！