Bootstrap：如何在form-horizontal表单中将标签移至输入框右侧？

嘿，我懂你想把标签放在输入框右边的需求——Bootstrap的form-horizontal默认确实是左标签右输入的布局，要反转这个效果其实只需要调整DOM结构和几个小细节就行，我给你改好了示例代码，还会解释改动点：

修改后的可行代码 #

<form class="form-horizontal">
  <fieldset>
    <!-- Form Name -->
    <legend>Align Label Form</legend>

    <div class="col-sm-6">
      <!-- Text input (标签在右侧) -->
      <div class="form-group">
        <!-- 先放输入框列 -->
        <div class="col-sm-6">
          <input id="textinput-right" name="textinput-right" placeholder="placeholder" class="form-control input-md" type="text">
        </div>
        <!-- 再放标签列，并调整文本对齐 -->
        <label class="col-sm-4 control-label text-left" for="textinput-right">Right Align</label>
      </div>
    </div>

    <div class="col-sm-6">
      <!-- 原左对齐标签作为对比 -->
      <div class="form-group">
        <label class="col-sm-4 control-label" for="textinput-left">Left Align</label>
        <div class="col-sm-6">
          <input id="textinput-left" name="textinput-left" placeholder="placeholder" class="form-control input-md" type="text">
        </div>
      </div>
    </div>
  </fieldset>
</form>

关键改动说明 #

• 调整DOM顺序：把输入框所在的<div class="col-sm-6">移到标签列的前面，这样在Bootstrap的栅格布局里，输入框会先占据左侧空间，标签自然就跑到右侧了
• 修正标签对齐：给标签添加text-left类，因为form-horizontal里的control-label默认是text-right（为了和左输入框对齐），改成左对齐后，标签文本能和输入框的左侧边缘对齐，视觉上更协调

如果你用的是Bootstrap 3 #

Bootstrap 3用的是浮动布局，需要额外调整浮动方向，代码可以改成这样：

<div class="col-sm-6">
  <div class="form-group">
    <div class="col-sm-6 pull-left">
      <input id="textinput-right" name="textinput-right" placeholder="placeholder" class="form-control input-md" type="text">
    </div>
    <label class="col-sm-4 control-label pull-right text-left" for="textinput-right">Right Align</label>
    <!-- 清除浮动，避免布局错乱 -->
    <div class="clearfix"></div>
  </div>
</div>

这里给输入框列加pull-left，标签列加pull-right，最后加clearfix清除浮动，就能实现同样的效果。

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