w-100在小屏错位因未处理flex容器的宽度争夺，按钮被压缩或换行；应改用flex-grow-1+min-width:0替代，或配合flex-wrap、flex-column等响应式类控制布局。
按钮直接加 w-100 为什么在小屏上还是错位？
因为 w-100 只是设了 width: 100%，但没管父容器的 flex 行为。当按钮放在 .card-footer 或 .input-group 这类 flex 容器里时，它会和兄弟元素争宽度，甚至被压缩变形或换行错乱。
常见错误现象：手机上按钮文字挤成一行、图标消失、右侧按钮被顶出视口；或者多个按钮堆叠后高度不一致。
- 优先用
flex-grow-1+min-width: 0替代w-100（尤其在 flex 容器内） - 若父容器是
.btn-group，直接加flex-wrap类控制换行，别硬撑w-100 - 避免对
button元素写style="width: 100%"—— 会覆盖 Bootstrap 的 CSS 变量继承，主题切换时按钮宽度异常
.btn-group 里按钮怎么在小屏垂直堆叠？
默认 .btn-group 是水平排列，但小屏下空间不足时，必须主动干预方向，不能指望自动换行。
使用场景：表单底部操作区、卡片页脚、移动端工具栏。
- 手机竖排 + 平板及以上横排：加
flex-column flex-md-row到外层div - 所有按钮等宽占满：在
.btn-group上加w-100，再给每个button加flex-grow-1 - 避免间隙过大：用
gap-2或gap-sm-1控制不同断点下的间距，别只用mb-2
导航栏里的搜索按钮为什么 w-100 后撑出滚动条？
根本不是按钮本身的问题，而是 .form-control 在 .navbar 中的盒模型叠加溢出。直接设 w-100 会让 input 强制占满，但父容器没约束最大宽度，padding + border + flex shrink 导致横向溢出。
Bootstrap 4 和 5 的差异很关键：.form-control 在 v4 是 display: block，v5 改为更适配 flex，但仍需 min-width: 0 才能真正收缩。
- 必须用
<div class="input-group"> 包裹，而不是裸放 <code>input - 按钮外层加
flex-shrink-0，防止被压缩变形 - input 本身加
flex-grow-1和style="min-width: 0;"（min-width: 0是触发 flex 最小重置的关键） - 别在
input上写width: 100%—— 和 flex 布局冲突，浏览器表现不一致 -
w-100本身无断点逻辑，但它的视觉效果取决于父容器是否真有足够宽度 - 改 Sass 断点时，
$container-max-widths必须同步更新，key 名要完全一致（sm/md/…一个都不能少） - CDN 项目无法改 Sass，只能用媒体查询硬覆盖
.container的max-width，否则w-100就是“假全宽”
自定义断点后 w-100 还生效吗？
生效，但行为可能和预期不符。因为 w-100 是全局类，不依赖断点，但它所作用的父容器（比如 .container 或 .col）的宽度已经随你改过的 $grid-breakpoints 变了。
容易被忽略的地方：你把 lg 断点调到了 1024px，但忘了同步改 $container-max-widths 里的 lg 值，结果按钮在 1024–1199px 区间“看着全宽”，实际是父容器卡在旧宽度（比如 960px），内容左右留白，按钮也被迫缩窄。
