如何在Bootstrap 4/4.0中将表单标签对齐至表单控件右侧？

嘿，我来帮你搞定这个表单标签对齐的问题！其实核心就是利用Bootstrap 4的栅格系统重新布局——默认情况下标签是块级元素，会占满整行所以跑到控件下方，咱们调整一下结构就能实现你要的效果：

具体实现步骤 #

• 给每个表单组（form-group）添加row类，启用栅格的水平布局模式
• 给标签元素设置合适的栅格列宽度（比如col-sm-2，可以根据你的页面布局调整数值），再加上text-right类，让标签文字靠右对齐
• 将表单控件（输入框、选择器等）放入对应的栅格列容器中（比如col-sm-10），保证标签和控件的列宽总和为12，符合Bootstrap栅格规则

代码示例 #

下面是针对“Rooms”或“People”这类表单项的实现代码：

<div class="form-group row">
  <label for="rooms" class="col-sm-2 col-form-label text-right">Rooms</label>
  <div class="col-sm-10">
    <input type="number" class="form-control" id="rooms" placeholder="Enter number of rooms">
  </div>
</div>

<div class="form-group row">
  <label for="people" class="col-sm-2 col-form-label text-right">People</label>
  <div class="col-sm-10">
    <input type="number" class="form-control" id="people" placeholder="Enter number of people">
  </div>
</div>

关键类说明 #

• row：创建水平布局的容器，让内部的列元素在同一行排列
• col-sm-*：设置标签和控件在小屏幕及以上设备的宽度占比，你可以根据需求换成col-md-*或col-lg-*来适配不同屏幕尺寸
• text-right：强制标签文字向右对齐，完美匹配你想要的效果
• col-form-label：Bootstrap提供的专门用于表单标签的样式类，保证标签和控件的垂直对齐更协调

如果你原来的代码没有使用栅格结构，只需要把每个表单项按照上面的方式重新包裹，就能解决标签显示在控件下方的问题，实现和示例中一样的右对齐标签效果啦！

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