Bootstrap水平表单复制官方代码后输入框未占满列宽的问题

常见根因排查 #

• 核心问题为Bootstrap样式未按对应版本正确引入
  你抄录的HTML结构是Bootstrap 4.x版本官方文档的标准水平表单写法，form-horizontal类、form-group搭配栅格row类、col-form-label类的组合全部对应v4版本的规则。如果出现输入框没有撑满父列宽度的情况，90%以上是两类引入问题：
  1. 未加载对应版本的Bootstrap核心CSS文件：form-control类自带的width:100%样式是实现输入框撑满的核心规则，如果未加载对应CSS，原生input默认按内容宽度渲染，不会自动填满所在列。
  2. 引入的Bootstrap版本和代码不匹配：比如引入的是Bootstrap 3或者Bootstrap 5的CSS，和抄录的v4类名不兼容。例如v5已经彻底移除了form-horizontal类，v3的栅格断点、类名和v4差异极大，都会导致布局错乱、宽度表现不符。
• 次要问题为存在自定义样式覆盖
  检查项目全局CSS里是否有针对input标签的强制宽度规则，比如input { width: auto; max-width: 300px; }这类全局样式，受CSS优先级规则影响，这类样式会覆盖Bootstrap给form-control设置的100%宽度规则，导致输入框被限制在固定窄宽度，和你附的自写代码渲染表现一致。

针对性调整步骤 #

• 在页面<head>标签内引入和代码版本匹配的Bootstrap 4.x核心CSS文件，不要用其他版本替代。
• 检查全局自定义CSS，移除针对表单input的非必要宽度限制规则。
• 如果确认引入正确、没有样式覆盖仍存在宽度异常，可以在自定义样式里补一条强制匹配规则：

  .col-sm-10 > .form-control {
    width: 100%;
  }
  

• 如果打算升级到Bootstrap 5版本适配，不需要保留form-horizontal类，把form-group row替换为row mb-3即可，保持栅格列宽不变就能实现和官方一致的水平表单效果。

内容的提问来源于stack exchange，提问作者Matthew McKinley