Bootstrap 4实现紧凑水平表单行的技术求助

嘿，别被文档里的各种变体搞晕啦！Bootstrap 4本身就自带了开箱即用的表单对齐方案，完全不用自定义任何样式，我给你贴个最贴合需求的示例，直接拿去用就行：

基础版：每行标签+文本框 #

这个结构全用Bootstrap官方默认类，自动搞定对齐和响应式：

<form>
  <!-- 第一行：邮箱输入 -->
  <div class="form-group row">
    <label for="emailInput" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="emailInput" size="60" placeholder="请输入邮箱">
    </div>
  </div>

  <!-- 第二行：密码输入 -->
  <div class="form-group row">
    <label for="pwdInput" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwdInput" size="60" placeholder="请输入密码">
    </div>
  </div>

  <!-- 第三行：昵称输入 -->
  <div class="form-group row">
    <label for="nicknameInput" class="col-sm-2 col-form-label">昵称</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="nicknameInput" size="60" placeholder="请输入昵称">
    </div>
  </div>
</form>

要是你需要每行三个元素（比如标签+文本框+操作按钮） #

直接调整栅格比例就行，同样全是默认样式：

<form>
  <div class="form-group row">
    <label for="nameInput" class="col-sm-2 col-form-label">姓名</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" id="nameInput" size="60" placeholder="请输入姓名">
    </div>
    <div class="col-sm-3">
      <button type="button" class="btn btn-outline-primary">保存</button>
    </div>
  </div>
</form>

简单说下逻辑： #

• form-group row是Bootstrap官方推荐的水平表单容器，自动处理标签和输入框的对齐逻辑
• col-sm-2/col-sm-10这类栅格类，控制标签和输入区域的宽度占比，小屏幕会自动上下堆叠，不用额外写响应式代码
• col-form-label是专门给表单标签用的类，保证和输入框垂直居中对齐
• 你要的size="60"直接加到input标签里就行，Bootstrap会兼容这个属性

完全不用写任何自定义CSS，直接用这些默认类就搞定对齐啦！

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