Bootstrap输入框宽度由父容器决定，需用栅格系统（如.col-md-8）、内联样式（父元素设width+input设width:100%）或自定义max-width控制，form-control-sm/lg仅影响高度。
Bootstrap 输入框默认宽度由父容器决定，不是固定像素值；想精确控制长度，得靠栅格列宽、内联样式或自定义 CSS，不能只依赖 form-control 类本身。
用 Bootstrap 栅格系统控制输入框宽度
最稳定、响应式友好的方式是把 input 套在 .col-* 容器里。Bootstrap 的栅格会自动分配水平空间，且在不同断点下可切换。
-
.col：等分剩余空间（适合表单内多个输入框并排） -
.col-6或.col-md-4：指定具体列数，推荐用于需要明确宽度比例的场景 - 避免直接给
input加width: 300px——它会脱离栅格流，小屏下容易溢出
示例：
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control" placeholder="占父容器 8/12 宽度">
</div>
</div>
用 style="width" 快速微调但要注意兼容性
临时调试或固定像素需求时可用内联 style，但必须同时作用于父级 .form-group 和 input，否则 input 会被压缩或撑破容器。
- 只设
input的width: 100%不生效——因为默认display: inline-block，受父元素width限制 - 正确写法：
<div class="form-group" style="width: 300px;"><input class="form-control" style="width: 100%;"></div> - 若父元素没设宽，
width: 100%会回退到fit-content行为，看起来没变化
form-control-sm / form-control-lg 不影响宽度，只改高度和内边距
这两个类调整的是单行输入框的「垂直尺寸」：包括 padding、font-size、height 和 border-radius，但不改变水平方向的伸缩逻辑。
- 它们对
<textarea>和<select>（需搭配.form-select）也生效，但对checkbox/radio无效 - 如果你发现加了
form-control-lg后输入框“变宽了”，大概率是font-size增大导致内容换行或父容器重排，不是类本身设了width - 不要试图用
form-control-lg替代宽度控制——它解决的是可读性/触控目标问题，不是布局问题
自定义 CSS 覆盖时，优先改 max-width 而非 width
全局统一输入框最大宽度时，建议用 CSS 规则覆盖 .form-control 的 max-width，而不是硬写 width。
-
max-width: 100%是 Bootstrap 默认值，保证它始终不超出父容器；设成max-width: 500px就能防止单个输入框在大屏下过宽 - 如果用
width: 500px，小屏下会横向滚动或溢出，破坏响应式 - 注意检查是否被其他 CSS（比如
.input-group或第三方插件）的flex设置干扰，此时加!important只是掩盖问题，应查源头
真正难处理的其实是 .input-group 内部的宽度继承逻辑——它的子元素默认 flex: 1，但一旦你给 input 加了 width，就会打破这个弹性，这点容易被忽略。
