width: 100% 在 bootstrap 4 表单中不生效，是因为 .form-control 的百分比宽度依赖父容器提供有效宽度基准；若父级为 inline-block、无宽 div 或 flex 容器且未设 min-width: 0，则 width: 100% 回退为内容宽度。
为什么 width: 100% 在 Bootstrap 4 表单中不生效
因为 Bootstrap 4 的 .form-control 默认是 display: block，但若它被嵌套在 inline-block 或未设宽的父容器里（比如裸 <div>），<code>width: 100% 就会回退到内容宽度——看起来“没撑开”，实际是父级没提供可参照的宽度基准。
常见错误场景：
-
<div style="display: inline-block"><input class="form-control"></div>：父元素脱离文档流，子元素无法继承宽度 - 直接对
input写style="width: 100%"，但外层没包裹.form-group或栅格列，浏览器按fit-content渲染 - 在
.navbar或.btn-group里直接放.form-control，Flex 布局下缺少min-width: 0导致不收缩
用 .col-* 栅格包裹是最稳的解法
Bootstrap 4 的栅格系统基于 Flexbox，.col-* 类天然提供宽度上下文，.form-control 的 width: 100% 才能真正起作用。
正确写法示例：
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="占 6/12 宽度">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="并排另一个">
</div>
</div>
关键点：
- 必须用
.row+.col-*包裹，不能只给input加类 - 避免在
.col-*内再套display: inline-block的 div，否则破坏栅格继承链 - 小屏下想等宽堆叠？加
col-12 col-md-6即可，无需额外 JS
临时调试时用内联 style 要同时控制父子级
如果只是快速验证或固定像素宽度，可以内联写宽，但必须让父容器先有明确宽度，否则 width: 100% 无从计算。
正确写法：
<div class="form-group" style="width: 320px;"> <input class="form-control" style="width: 100%;"> </div>
错误写法（只设 input）：
<input class="form-control" style="width: 320px;">
注意：
-
.form-control-sm和.form-control-lg不影响宽度，只改高度和字体大小 - 如果用了
.input-group，必须确保整个组有宽度约束，否则右侧按钮会错位 - 自定义 CSS 改宽度时，优先用
max-width而非width，防止小屏溢出
导航栏或 Flex 容器里的输入框要加 min-width: 0
在 .navbar、.card-footer 等 Flex 容器中，.form-control 默认不会收缩——哪怕写了 width: 100%，也会因 flex item 的最小宽度限制而撑破容器。
必须组合使用：
- 外层用
<div class="input-group">（自带 <code>d-flex） <input class="form-control flex-grow-1" style="min-width: 0;">- 右侧按钮加
flex-shrink-0
漏掉 min-width: 0 是最常被忽略的一环：它不是为了“缩小”，而是告诉 Flex 布局“我可以缩到 0”，否则浏览器会按文字+padding+border 的实际尺寸保底，宽度控制彻底失效。
