如何在Bootstrap 4中实现表单控件与标签同行显示？

没问题！在 Bootstrap 4 里要实现标签和表单控件同行，同时保持响应式布局，核心是利用它的网格系统和专门的表单类配合，不用纠结默认堆叠的.form-group，直接把标签和控件拆分到网格列里就行。

下面是完整的可运行代码示例，完全贴合你的需求：

<form action="#" autocomplete="nope">
  <!-- 第一个表单组：姓名输入 -->
  <div class="form-row mb-3">
    <label for="inputName" class="col-sm-2 col-form-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputName" placeholder="请输入姓名">
    </div>
  </div>

  <!-- 第二个表单组：角色选择 -->
  <div class="form-row mb-3">
    <label for="inputRole" class="col-sm-2 col-form-label">角色</label>
    <div class="col-sm-10">
      <select class="form-control" id="inputRole">
        <option selected>请选择角色</option>
        <option>管理员</option>
        <option>普通用户</option>
      </select>
    </div>
  </div>

  <!-- 响应式适配示例：小屏幕自动堆叠 -->
  <div class="form-row mb-3">
    <label for="inputEmail" class="col-md-2 col-form-label text-md-right">邮箱</label>
    <div class="col-md-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="name@example.com">
    </div>
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

关键细节说明 #

• 用.form-row而非普通.row：这是 Bootstrap 专为表单设计的行容器，左右内边距更小，比普通.row更适配表单元素的间距，不会显得松散。
• .col-form-label必须加：这个类能让标签和表单控件垂直居中对齐，避免出现标签和输入框上下错位的尴尬情况。
• 响应式断点控制：示例里的col-sm-2和col-sm-10，意思是屏幕宽度≥576px（sm断点）时，标签占2列、输入框占10列；屏幕小于这个尺寸时，标签和输入框会自动堆叠成两行，完美适配移动端。你也可以换成col-md-*、col-lg-*来调整不同屏幕下的布局比例。
• 可选：标签右对齐：给标签加上text-sm-right类（对应断点），就能在大屏实现标签右对齐的传统表单布局，小屏幕自动切换成左对齐堆叠。

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