在 Bootstrap 4 中实现卡片组来对齐相同高度的卡片可能具有挑战性,特别是在考虑响应式时设计。默认情况下,Bootstrap 4 的卡片组将卡片分布在四列中,无论视口大小如何。
当您希望卡片在不同视口中保持一致的外观时,就会出现此问题尺寸。 Bootstrap 4 中的默认设置不考虑最小卡片大小,也不考虑视口类对卡片组行为的影响。
创建响应式卡片组根据视口大小调整列数,您可以利用 Bootstrap 4 中引入的可见性实用程序。通过在特定断点上设置特定列的可见性,您可以强制换行并创建所需的布局。
对于 4.1 之前的 Bootstrap 4 版本,您可以使用网格 col-* 类来控制卡片宽度。但是,这需要额外的 CSS 代码段来启用 Flexbox 并确保列的高度相等。
<code class="css">.row > div[class*='col-'] { display: flex; flex:1 0 auto; }</code>
Bootstrap 4 Alpha 6及更高版本默认启用flexbox。因此,您可以利用 h-100 等级将卡设置为全高。这种方法不需要额外的 CSS 来处理 Flexbox 行为。
总之,通过根据您正在使用的 Bootstrap 4 版本采用适当的技术,您可以实现具有所需效果的响应式卡片组。列计数并在不同的视口大小中保持一致的外观和感觉。
以上是如何创建具有基于视口的列数的响应式 Bootstrap 4 Card-Deck?的详细内容。更多信息请关注PHP中文网其他相关文章!