Bootstrap+ReactJS下Form-Horizontal水平表单无法正常显示求助

嘿，我来帮你搞定这个问题～你遇到的元素换行溢出，跟textarea没啥关系（你代码里也没用到它😉），主要是Bootstrap表单结构和网格布局的几个小问题没处理对，咱们一步步修正：

问题根源拆解 #

• 类名拼写错误：你写的form- horizontal多了个空格，应该是form-horizontal——这个类是Bootstrap实现水平表单的核心，写错了直接导致样式失效。
• React属性兼容问题：React里不能用HTML的for属性，得换成htmlFor，不然不仅会有控制台警告，label和input的关联功能也会失效。
• 旧版Bootstrap类混用：control-group是Bootstrap 2的类，Bootstrap 3+的水平表单应该用form-group来包裹label和输入框组。
• 多余嵌套的表单类：你在col-sm-6里又套了一层form-horizontal，这会导致网格布局的嵌套逻辑混乱，反而破坏水平排列。

修正后的完整代码 #

<div className="container">
  <div className="row">
    <div className="col-sm-12 dijitContentPane">
      {/* 修正form-horizontal的空格问题 */}
      <form id="shopcartAddressForm" className="js-validateForm form-horizontal" data-fv-framework="bootstrap">
        <div className="col-sm-6">
          {/* 移除多余的嵌套form-horizontal，用form-group替换control-group */}
          <div className="form-group">
            {/* React中用htmlFor替代for属性 */}
            <label htmlFor="firstName" className="col-sm-4 control-label no-bold">
              First Name<span className="red">*</span>
            </label>
            {/* 保持列宽总和为12，避免溢出换行 */}
            <div className="col-sm-5">
              <input tabindex="0" type="text" id="firstName" className="form-control" aria-label="First Name" placeholder="First Name" value="" />
            </div>
            <label htmlFor="middleName" className="col-sm-1 control-label no-bold">MI</label>
            <div className="col-sm-2">
              <input tabindex="0" type="text" id="middleName" className="form-control" aria-label="MI" placeholder="MI" value="" />
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

额外注意事项 #

• 确保你引入的Bootstrap版本是3.x或以上（如果是4.x，水平表单的实现逻辑略有不同，需要用row和col直接配合，不再需要form-horizontal）。
• 检查是否有自定义CSS覆盖了Bootstrap的网格padding/margin，这也可能导致元素挤压换行。

这样调整后，你的表单应该就能实现你想要的水平排列效果啦～

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