3.2 表单组件：栅格里的输入布局

3.2 表单组件：栅格里的输入布局

Bootstrap 表单没有一个大而全的「表单组件」类，它是 form-label、form-control、form-select、form-check 等控件类，加上栅格与间距工具拼装出来的合成体。分栏、分组、尺寸三件事全部外借第 2 章的能力。本节立好控件分工与分栏裁决，并埋下无障碍的规矩。

位置：组件四案第二案。表单是「组件长在栅格上」的最典型样本——它自己没有断点条文，所有响应式行为都来自借来的栅格。

控件分工：每个类管一层皮

<form class="container">
  <!-- 一个输入组的标准三件套：label / control / 说明文字 -->
  <div class="mb-3">
    <label for="email" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">用于登录与找回密码，不会公开。</div>
  </div>
  <!-- 下拉选择：form-select 与 form-control 同款皮肤 -->
  <div class="mb-3">
    <label for="city" class="form-label">所在城市</label>
    <select class="form-select" id="city">
      <option selected>请选择</option>
      <option value="sh">上海</option>
      <option value="bj">北京</option>
    </select>
  </div>
  <!-- 开关：form-check 家族，form-switch 是开关样式 -->
  <div class="form-check form-switch mb-3">
    <input class="form-check-input" type="checkbox" role="switch" id="remember">
    <label class="form-check-label" for="remember">三十天内免登录</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
​

三件套各司其职：form-label 管标签排版，form-control/form-select 管控件皮肤（边框、内边距、聚焦环），form-text 管辅助说明。label 的 for 与控件的 id 必须配对——这行不是装饰，读屏软件靠它把标签念给输入框，6.2 节会再收这笔账。

分栏断案：表单的断点行为全在栅格里

图 3-2 收货地址表单的两种排法

<!-- 图中排法的实现：外层 row，内层 col；g-3 统一行列间距 -->
<form class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6">
      <label for="fname" class="form-label">姓</label>
      <input type="text" class="form-control" id="fname">
    </div>
    <div class="col-12 col-md-6">
      <label for="lname" class="form-label">名</label>
      <input type="text" class="form-control" id="lname">
    </div>
    <div class="col-12 col-md-6">
      <label for="prov" class="form-label">省</label>
      <select class="form-select" id="prov"><option selected>请选择</option></select>
    </div>
    <div class="col-12 col-md-6">
      <label for="city" class="form-label">市</label>
      <select class="form-select" id="city"><option selected>请选择</option></select>
    </div>
    <div class="col-12">
      <label for="addr" class="form-label">详细地址</label>
      <input type="text" class="form-control" id="addr" placeholder="街道、门牌号">
    </div>
  </div>
  <button class="btn btn-primary mt-3">保存地址</button>
</form>
<!-- 验证：手机上每个字段整行；768px 起姓名、省市并排，详细地址保持整行 -->
​

裁决依据一句话：成对语义的字段（姓/名、省/市、起止日期）在宽屏并排、窄屏竖排；长文本字段（地址、备注）任何断点都整行。 分栏点通常选 md——768px 以下竖排保证单字段宽度，以上并排缩短表单纵向长度。

尺寸与只读：同族条的变体

<!-- 控件尺寸：form-control-lg / sm 同步放大内边距与字号 -->
<input class="form-control form-control-lg" placeholder="大号：落地页主搜索框">
<input class="form-control" placeholder="默认：常规表单">
<input class="form-control form-control-sm" placeholder="小号：表格内嵌筛选">

<!-- 纯文本呈现：form-control-plaintext 值可读不可改，边框隐形 -->
<input type="text" readonly class="form-control-plaintext" value="zhang@example.com">

<!-- 文件与色板：form-control 的两个特化 -->
<input type="file" class="form-control">
<input type="color" class="form-control form-control-color" value="#0d6efd" title="选主题色">
​

尺寸类只改皮肤不改行为，lg/sm 与按钮的尺寸类共用词根，视觉档位天然一致。

⚠️ 常见坑：把 mb-3 写在 label 上而不是输入组容器上，间距在并排布局里会错位。间距判给「字段容器」（包 label 与控件的 col），行间再交给 g-3，两层间距不混判。

变式：三种进阶排法

变式一（内联表单）：搜索条场景，d-flex 加 flex-grow-1，2.3 节判例四已示范。变式二（输入组）：金额输入带货币前缀，input-group 包裹 input-group-text 与控件，前缀皮肤自动对齐。变式三（多行分组）：企业注册表单按「主体信息、联系人、资质」分 fieldset，每组一个 legend，外层仍是大栅格——表单越长，栅格预算表越要在纸上先画好。

结案要点

• 表单是合成组件：控件类管皮肤，栅格管分栏，间距工具管留白；
• 分栏裁决：成对字段宽屏并排、窄屏竖排，分栏点常在 md；长文本恒整行；
• label 的 for/id 配对是无障碍底线，尺寸类只改皮肤；
• 间距判给字段容器、行列间距交给 g-*，避免双层 margin 打架。

下一节看内容展示类：表格、图片与图注的窄屏退化策略。