Bootstrap卡片中.card-text内容显示异常，调整空间无效求助

问题根源在于你给容器设置的white-space: nowrap和卡片的display: inline-block属性与flex布局冲突，导致卡片内部文本无法正常换行，进而挤压或隐藏了.card-text的内容。

修正方案： #

1. 移除#skills_container中的white-space: nowrap——flex布局本身可实现横向排列，无需该属性强制文本不换行。
2. 给.card添加flex-shrink: 0，避免卡片在flex容器中被压缩变形。
3. 保留容器的overflow-x: auto以维持横向滚动效果。

修改后的CSS代码： #

#skills_container{
    width:96vw;
    display:flex;
    overflow-y: hidden;
    overflow-x:auto;
    padding:1rem;
    border:1px solid;
    border-radius:1rem;
    gap: 0.5rem; /* 可选，替代margin给卡片增加间距 */
}

.card{
    flex-shrink: 0; /* 关键：防止卡片被压缩 */
    margin:0 2px;
}

修改后，卡片内部的.card-text会正常换行显示，同时保持横向滚动的布局效果。

内容的提问来源于stack exchange，提问作者user19851042