bootstrap仅提供flex-grow-0和flex-grow-1类，因后者编译为flex:1 1 0而非单纯flex-grow:1，故无法直接实现2:1等非等比拉伸；需用内联style或自定义css（如.flex-grow-2{flex-grow:2}）配合d-flex容器及明确主轴尺寸方可生效。
bootstrap 默认不支持设置 flex-grow 的非 0/1 比例（比如 2、3 或 auto），仅提供 flex-grow-0 和 flex-grow-1 两个类；想实现 2:1 或不等比例拉伸，必须手动写内联样式或自定义 css。
为什么 flex-grow-1 不能当“比例值”用
flex-grow-1 在 Bootstrap 中被编译为 flex: 1 1 0，它不是单纯设 flex-grow: 1，而是固定了 flex-shrink: 1 和 flex-basis: 0。这意味着：
- 多个同级元素都加
flex-grow-1→ 等分剩余空间（1:1） - 你没法靠改 class 名（如
flex-grow-2）来获得 2 倍拉伸——Bootstrap 根本没定义这个类 - 即使你写了
class="flex-grow-1"和style="flex-grow: 2"，后者会生效，但前者会被覆盖，且无法复用
怎么实现 2:1 或其他 Grow 比例
直接在元素上写内联 style 是最轻量、最可控的方式，无需改构建流程或引入额外工具类：
- 两个子项，希望宽度比为 2:1：
<div style="flex-grow: 2">主区</div> <div style="flex-grow: 1">侧边</div> - 三个子项按 3:2:1 分配：
style="flex-grow: 3"、style="flex-grow: 2"、style="flex-grow: 1" - 如果要用 class 统一管理，建议在自定义 CSS 中定义：
.flex-grow-2 { flex-grow: 2; }、.flex-grow-3 { flex-grow: 3; }，注意不要加!important，除非被 Bootstrap 的.col规则覆盖
混用 flex-grow 和 Bootstrap 栅格类的坑
把 flex-grow 直接加在 .col 上大概率失效，因为 Bootstrap 的 .col 默认是 flex: 0 1 auto，优先级更高：
<div class="col flex-grow-1"> → 不生效，<code>.col的flex-grow: 0覆盖了它- 想让某列“吃掉剩余”，得先禁用栅格默认 flex 行为：
<div class="col" style="flex: 1"> 或自定义类 <code>.col-grow { flex: 1 !important; } - 更稳妥的做法是绕过
.row/.col，改用d-flex容器 + 手动控制子项flex-grow值 - 如果父容器用了
.container或.container-fluid，它们本身不是display: flex，必须显式加d-flex才能启用flex-grow - 父容器必须有
display: flex（即含d-flex或d-inline-flex） - 父容器需有明确的主轴尺寸（水平布局要宽度已知，垂直布局要高度已知），否则无“剩余空间”可分配
- 子元素内部若有未约束的长文本、图片或表格，会撑开最小宽度，导致
flex-grow看似“不动”——此时要加min-width: 0或word-break: break-word - 祖先节点若设了
overflow: hidden或min-width: 0，可能触发 shrink 截断，间接压制 grow 行为
容易被忽略的布局前提
flex-grow 生效的前提不是“加了类就完事”，而是整个链路都得配合：
