col-*和flex-fill无法设置有效边界，因前者锁死flex-basis且不设min/max-width，后者基准为内容宽且无压缩防护；可靠方案需手动组合flex: 0 1 calc()、min-width与max-width。
不能靠 col 类或 flex-fill 实现可靠的 min/max-width 控制——它们不提供宽度边界语义，必须用原生 CSS 属性组合控制。
为什么 col-* 和 flex-fill 无法设置有效边界
col-4 编译为 flex: 0 0 33.333333%，它锁死 flex-basis 且默认允许收缩（flex-shrink: 1），但不设 min-width 或 max-width；flex-fill 是 flex: 1 1 auto，基准按内容宽，完全不防压缩或撑爆。两者都无视你期望的物理像素边界。
- 加
style="min-width: 200px"后仍换行？大概率是flex-shrink: 1在空间不足时继续压缩，直到触达min-width才停止，此时总宽已超限 - 用
col-lg-6想限制大屏下不超 800px？无效——类只控制比例，不干预最终渲染宽度 - 误以为
mw-100能限制弹性子项？错，mw-*只对块级或modal-dialog等特定容器生效，对d-flex内部子项无作用
正确做法：用 inline style 或自定义 class 组合 flex 属性
弹性子项要真正守住宽度边界，必须同时控制三件事：flex-basis（初始宽）、flex-shrink（是否可缩）、min-width/max-width（硬性边界）。Bootstrap 不提供封装类，得手动写。
- 等宽三列且每列不窄于 200px、不宽于 400px：
<div class="d-flex"><div style="flex: 0 1 calc(33.333% - 0.5rem); min-width: 200px; max-width: 400px;">A</div><div style="flex: 0 1 calc(33.333% - 0.5rem); min-width: 200px; max-width: 400px;">B</div><div style="flex: 0 1 calc(33.333% - 0.5rem); min-width: 200px; max-width: 400px;">C</div></div> -
flex: 0 1 ...中的0表示不放大（flex-grow: 0），1表示可缩小（flex-shrink: 1），这样才让min-width和max-width有机会生效 - 减去
gap分摊值（如0.5rem对应gap-2）避免总宽超 100%，否则必换行
响应式断点下的 min/max 宽度切换
纯 CSS 媒体查询仍是唯一可靠方式。Bootstrap 的响应式工具类（如 mw-md-75）不适用于 d-flex 子项，只能用于顶层容器（如 modal-dialog）。
- 小屏下每列最小 120px，中屏起最小 180px，大屏起最小 240px：
<div style="min-width: 120px;"></div>@media (min-width: 768px) { [style*="min-width"] { min-width: 180px; } }@media (min-width: 992px) { [style*="min-width"] { min-width: 240px; } } - 别用
col-sm-4+min-width混搭——col-sm-4在sm断点启用后会覆盖flex-basis，导致min-width失效或行为不可预测 - 如果项目用 Sass，可封装 mixin：
@mixin flex-bound($min, $max) { min-width: $min; max-width: $max; flex: 0 1 auto; }，再按需调用
容易被忽略的关键点
最常出问题的地方不在写法，而在父容器和布局上下文：
-
.row自带margin-left: -15px; margin-right: -15px，若把弹性子项直接塞进.row又没配.col，负边距会干扰min-width计算，建议用纯d-flex替代.row - 父容器若设了
width（非max-width），且值小于子项min-width总和，Flex 会强制换行——此时该检查父容器宽度逻辑，而非调子项 - Chrome DevTools 的 Elements → Styles 面板里，看 computed 的
flex-basis、min-width和实际width是否一致，比猜更准
