Html 引导4卡水平滚动问题？

我正在使用引导卡在下面创建一个基本的图像和文本。决定使用card类，因为它是一个非常好的结构，不想使用太多的css来水平排列div列表。我想要的是像这样一个水平滚动的图像库

问题是，当我添加更多的卡时，卡的行为会变得更小。这里有什么问题，也许我不应该使用卡片组？。也许我得放弃bootstrap写我自己的

.card组{
溢出-x：滚动；
空白：nowrap；
最大宽度：30雷姆；
填充：1rem；
}

文件
无名氏
无名氏
无名氏
无名氏

您的卡越来越小的原因是

。卡组

显示为

flex

，其卡项的

flex grow

设置为1，这意味着它们将占据相同的宽度：

要获得所需的内容，您可以定义自定义类及其默认的

.card group

（这样您就不会覆盖默认的card group样式），设置其溢出样式及其子类

的

弹性基础

，使其具有默认宽度。您需要将卡组的包装样式设置为

无包装

，默认设置为

包装

CSS 结果

---

fiddle:

就我所读到的内容而言，

卡片组和
卡片组都是响应性布局（与引导中的所有布局一样），因此如果您将更多卡片放入其中，它们将根据宽度进行调整，以便它们都可见。在您的特定情况下，您可以尝试覆盖卡片样式，使其具有固定宽度（我尝试了但没有成功），或者为您需要的方法创建自己的样式类。
@media (min-width: 576px) {
    .card-group.card-group-scroll {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .card-group.card-group-scroll > .card {
        flex-basis: 35%;
    }
}