w-100用于强制元素宽度为100%以撑满父容器，w-auto则让元素按内容自然收缩；二者语义相反，误用会导致布局塌陷或溢出。
什么时候该用 w-100 而不是 w-auto
w-100 强制元素宽度为 100%，即撑满其父容器的可用宽度；w-auto 则放弃所有宽度控制，让元素按内容自然收缩（相当于移除 width 声明）。两者语义完全相反，选错会导致布局塌陷或溢出。
常见错误现象：
- 给按钮加了
w-100后在小屏上变宽到超出卡片边界 - 给图片加了
w-auto后失去响应式缩放能力，大图直接撑破容器 - 在 flex 容器里对子项同时设
w-100和flex-shrink-0，造成水平滚动
适用场景建议：
-
w-100：表单控件需填满父容器（如<input class="w-100">）、分隔线<hr class="w-100">、需要强制换行前拉伸的内联元素 -
w-auto：清除第三方组件注入的固定宽度（如某些图表库默认设width: 600px）、恢复按钮/徽章的默认尺寸、配合position: absolute元素避免被父级width限制
w-100 在 Flex / Grid 容器中容易失效的原因
Flex 或 Grid 子项默认有 flex-shrink: 1 或 grid-column: auto 行为，会优先压缩自身来适应容器，此时 w-100 的 CSS 规则（width: 100%）可能被覆盖或忽略。
实操建议：
- 若需在
div class="d-flex"中让某个子项占满剩余宽度，应改用flex-grow-1，而非w-100 - 若必须用
w-100，需额外加flex-shrink-0阻止压缩，例如：<div class="w-100 flex-shrink-0"> <li>在 <code>col内部嵌套时，w-100通常有效；但在row直接子元素上使用，易受margin-left/right: -15px干扰 -
w-100：基于父容器 content box 的 100% 宽度（不含 padding） -
mw-100：设置max-width: 100%，常用于图片/iframe 防止溢出，不影响小尺寸时的收缩 -
vw-100：基于视口宽度的 100%，哪怕父容器只有 200px，它也会强行铺满整个屏幕宽 - 给响应式表格加
w-100→ 应该用table-responsive+mw-100 - 给模态框标题加
vw-100→ 文字会随窗口拉伸变形，应保持w-auto或text-truncate - 搭配
overflow-hidden或px-0清除父容器默认 padding 干扰 - 避免在
position: fixed元素上直接使用w-100，改用left: 0; right: 0 - 测试真机时重点检查
input[type="range"]、select等原生控件，它们在某些系统版本下会忽略w-100
与 mw-100、vw-100 的关键区别
名字相似但行为完全不同，混用会引发意料外的溢出或截断：
典型误用：
移动端适配中 w-100 的隐藏陷阱
在 iOS Safari 或部分 Android WebView 中，w-100 有时会因 viewport 缩放、字体渲染差异或父级 transform 导致实际宽度计算偏移 1–2px，表现为右侧轻微溢出或滚动条闪现。
规避方式：
最常被忽略的一点：Bootstrap 5 的 w-100 不处理 box-sizing，默认仍是 content-box。如果父容器有 padding，子元素即使 w-100 也会被挤窄——这时候得手动补 box-sizing: border-box 或换用 flex-grow-1。
