使用Bootstrap card类时自定义背景色无法覆盖card-text区域的问题

问题出在你给.card设置的align-items: center上：

• Flex布局里，align-items: center会让子元素（比如.card-text）的宽度收缩为自身内容的宽度，而不是撑满.card的300px宽度。
• 虽然.card已经设置了白色背景，但.card-text本身是透明背景，且宽度只包裹文字，视觉上就会显得这个区域没被背景色填充。

给你两种解决办法：

方法一：移除align-items:center（推荐） #

既然你已经给.card加了text-align: center来居中文字，完全不需要用align-items: center来控制子元素对齐，移除后.card-text会默认撑满.card宽度，.card的背景色就会覆盖整个卡片区域：

.card {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* 删掉align-items: center */
    width: 300px;
    height: 490px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
    text-align: center;
    padding: 0 1rem; /* 可选：给文字加左右内边距，避免紧贴卡片边缘 */
}

.content{
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3rem auto 2rem;
    padding: 1rem 1rem 1.5rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 20px;
}

方法二：给card-text设置100%宽度 #

如果一定要保留align-items: center，可以强制让.card-text撑满父容器宽度：

.card {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 490px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
    text-align: center;
}

.card-text {
    width: 100%;
    padding: 0 1rem; /* 可选：优化文字边距 */
}

.content{
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3rem auto 2rem;
    padding: 1rem 1rem 1.5rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 20px;
}

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