Bootstrap Card设置width样式无效 如何调整卡片组首列宽度

问题原因 #

Bootstrap 4的.card-group容器默认采用弹性布局，其内部的.card元素被框架默认设置了flex: 1 0 0%样式，该属性优先级高于你添加的行内width属性，会强制所有卡片自动拉伸填充.card-group的可用空间，因此你手动设置的3rem宽度不会生效。

解决方法 #

你只需要给第一列需要固定宽度的卡片添加禁止拉伸、缩小的flex配置即可，有两种常用实现方式：

1. 直接修改行内样式，把原第一列卡片代码：

<div class="card" style="width: 3rem;">
替换为：
<div class="card" style="flex: 0 0 3rem; width: 3rem;">
参数说明：

• flex-grow: 0：禁止卡片拉伸填充剩余空间
• flex-shrink: 0：禁止卡片被挤压缩小
• flex-basis: 3rem：指定卡片的基础宽度为3rem，和你设定的width值保持一致即可

2. 用Bootstrap自带的flex工具类实现，无需手写flex属性：

<div class="card flex-grow-0 flex-shrink-0" style="width: 3rem;">

两种方式都可以让第一列卡片固定为你设置的3rem宽度，不再占用多余空间。

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