Bootstrap弹性布局本身不控制字体缩放，需用clamp(0.875rem, 2.5vw, 1.25rem)实现响应式字号，并配合flex-shrink: 0、justify-content-center及同步响应的line-height确保对齐与可读性。
Bootstrap弹性布局中字体大小不随容器缩放？
弹性布局（d-flex、flex-grow等）本身不触发字体响应式行为——它只控制元素排列与空间分配，font-size仍按 CSS 标准流规则计算，不会因为父容器变窄就自动缩小文字。你看到“文字挤出容器”或“小屏上字太大”，本质是字体没做响应式适配，不是 Flex 本身的问题。
用 clamp() 替代固定 font-size 实现真弹性
在 Flex 容器内控制文字大小，最直接有效的方式是放弃 px 或静态 rem，改用 clamp() 让字号随视口宽度平滑过渡：
-
font-size: clamp(0.875rem, 2.5vw, 1.25rem);—— 小屏最小 14px，大屏封顶 20px，中间线性过渡 - 必须搭配
flex-shrink: 0防止 Flex 自动压缩文字容器（否则clamp()可能被截断） - 避免嵌套多层
clamp()：父容器用clamp()控制整体字号，子元素统一用em或无单位比例继承，如h2 { font-size: 1.5; } - 注意
vw基于 viewport 宽度，不是容器宽度；若需“随容器宽缩放”，得用 JS 监听ResizeObserver+calc()动态设--font-scale变量
Flex 容器里 text-center 和字体缩放冲突怎么办
当文字在 d-flex 容器中居中，又同时启用响应式字号时，容易出现对齐错位或行高失衡：
-
text-center在 Flex 容器中无效——它只作用于块级流，而 Flex 子项已脱离该流；应改用justify-content-center+align-items-center - 行高必须同步响应：
line-height: clamp(1.2, 0.6rem + 0.8vw, 1.5);，否则字号缩小时行距不变，文字会“贴顶” - 图标类（如
.bi）默认用em单位，会随父字号缩放，但需加vertical-align: -0.125em;微调基线 - 别给 Flex 子元素同时设
text-center和justify-content-center——前者冗余，后者才是真实生效的对齐逻辑
为什么 font-size() Sass 函数在 Flex 组件里不生效
font-size() 是 Bootstrap RFS 系统的 Sass 函数，只在编译期起作用，且依赖变量注入流程。你在 Flex 相关组件（如 .card-title、.modal-header）里直接写 font-size: font-size(18px); 不会生效，除非：
- 确保已在自定义
_custom.scss中提前声明$enable-responsive-font-sizes: true;，且在@import "bootstrap"之前 - 重定义对应组件变量，例如：
$h2-font-size: font-size(1.5rem);，再@import "bootstrap/scss/components/card" - 纯 CSS 引入（
bootstrap.min.css）项目完全无法使用font-size()，此时只能靠clamp()或媒体查询 - RFS 默认缩放区间是 ≥1200px，小屏下锁死在最小值（约 1rem），若想让 Flex 导航栏标题在手机上也缩得更小，得调低
$rfs-breakpoint
真正关键的是：弹性布局和字体响应式是两层事——Flex 解决“怎么排”，clamp() 或 RFS 解决“多大号”。混用时最容易忽略行高、图标对齐、以及变量注入时机这三个点。
