Bootstrap 3 表單水平佈局：control-group/class 名稱錯誤導致 Label 與 Input 不在同行

使用 Bootstrap 3 form-horizontal 時，Label 與 Input 垂直堆疊而非同行。原因：程式碼使用了 **Bootstrap 2 的類別名稱**（control-group、control-label、controls），Bootstrap 3 已更名為 form-group、col-sm-2 control-label、col-sm-10。

Bootstrap 3 正確結構

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

對照表

關鍵點

• form-horizontal 需搭配網格類別 col-sm-* 分配 Label/Input 寬度比例。
• Input 必須加 class="form-control" 才會撐滿父容器寬度。
• 參考官方文件：Bootstrap 3 表單文件

升級 Bootstrap 版本時，務必同步更新類別名稱與結構，避免樣式失效。