Bootstrap 输入框尺寸

Bootstrap 5 表单输入尺寸设置

表单中的输入尺寸设置

Bootstrap 5 提供了类来轻松控制表单输入元素的高度和宽度，帮助你创建视觉上均衡且响应式的表单。

使用诸如 .form-control-lg（用于更大的输入框）和 .form-control-sm（用于更小的输入框）之类的类来设置 <input>、<select> 和 <textarea> 元素的高度。

主要使用 Bootstrap 的网格列类（例如，.col-lg-6、.col-sm-4，或者仅使用 .col 在行内进行自动尺寸设置）来设置输入元素的宽度。

高度尺寸设置

你可以使用 .form-control-lg 和 .form-control-sm 分别使表单控件更高或更矮。

视觉示例：

.form-control-sm (小输入框)

.form-control (默认输入框)

.form-control-lg (大输入框)

以下示例展示了不同高度的输入元素：

<form>
  <div class="mb-3">
    <label for="inputSmall" class="form-label">Small input (.form-control-sm)</label>
    <input type="text" class="form-control form-control-sm" id="inputSmall" placeholder=".form-control-sm">
  </div>
  <div class="mb-3">
    <label for="inputDefault" class="form-label">Default input (.form-control)</label>
    <input type="text" class="form-control" id="inputDefault" placeholder="Default form-control">
  </div>
  <div class="mb-3">
    <label for="inputLarge" class="form-label">Large input (.form-control-lg)</label>
    <input type="text" class="form-control form-control-lg" id="inputLarge" placeholder=".form-control-lg">
  </div>
  <div class="mb-3">
    <label for="selectLarge" class="form-label">Large select (.form-select-lg)</label>
    <select class="form-select form-select-lg" id="selectLarge">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
    </select>
  </div>
</form>

<!--
  注意：对于 <select> 元素，使用 `.form-select-lg` 和 `.form-select-sm` 进行高度尺寸设置。
  旧的 `.input-lg` 和 `.input-sm` 类已弃用。
-->

横向表单中的尺寸设置：

当使用横向表单时（通过网格系统将标签和控件放在同一行），你也可以使用 .col-form-label-sm 或 .col-form-label-lg 类来设置标签尺寸以匹配输入框尺寸。

<form>
  <div class="row mb-3 align-items-center">
    <label for="inputLargeHorizontal" class="col-sm-3 col-form-label col-form-label-lg">大标签与输入框</label>
    <div class="col-sm-9">
      <input type="text" class="form-control form-control-lg" id="inputLargeHorizontal" placeholder="Large input">
    </div>
  </div>
  <div class="row mb-3 align-items-center">
    <label for="inputDefaultHorizontal" class="col-sm-3 col-form-label">默认标签与输入框</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputDefaultHorizontal" placeholder="Default input">
    </div>
  </div>
  <div class="row mb-3 align-items-center">
    <label for="inputSmallHorizontal" class="col-sm-3 col-form-label col-form-label-sm">小标签与输入框</label>
    <div class="col-sm-9">
      <input type="text" class="form-control form-control-sm" id="inputSmallHorizontal" placeholder="Small input">
    </div>
  </div>
</form>

<!-- 常见障碍：横向表单中标签和输入框尺寸不匹配。使用对应的 .col-form-label-* 和 .form-control-* 类。 -->

列尺寸设置（宽度）

在 .row 内部使用 Bootstrap 的网格列类来控制表单输入的宽度。这是管理输入宽度的首选方法。

网格列中输入框的视觉示例：

col-2 (位于 2 列宽容器中的输入框)

col-3 (位于 3 列宽容器中的输入框)

col-4 (位于 4 列宽容器中的输入框)

以下示例展示了放置在不同网格列宽度中的输入元素。请记住，.col-* 类适用于最小断点（extra small）及以上，除非被更大的断点类（例如，.col-sm-*、.col-md-*）覆盖。

<form>
  <div class="row g-3 mb-3"> <!-- g-3 添加 gutter -->
    <div class="col-md-2">
      <label for="ex1" class="form-label">col-md-2</label>
      <input class="form-control" id="ex1" type="text" placeholder=".col-md-2">
    </div>
    <div class="col-md-3">
      <label for="ex2" class="form-label">col-md-3</label>
      <input class="form-control" id="ex2" type="text" placeholder=".col-md-3">
    </div>
    <div class="col-md-4">
      <label for="ex3" class="form-label">col-md-4</label>
      <input class="form-control" id="ex3" type="text" placeholder=".col-md-4">
    </div>
  </div>
  <div class="row g-3">
    <div class="col-auto"> <!-- col-auto 根据内容调整尺寸 -->
        <label for="ex4" class="form-label">col-auto</label>
        <input class="form-control" id="ex4" type="text" placeholder="Auto width">
    </div>
    <div class="col"> <!-- col 填充剩余空间 -->
        <label for="ex5" class="form-label">col (填充剩余空间)</label>
        <input class="form-control" id="ex5" type="text" placeholder="Takes remaining width">
    </div>
  </div>
</form>

<!--
  实际应用：列尺寸设置对于创建复杂的表单布局至关重要，例如多列地址表单或搜索过滤器。
  注意：旧版本 Bootstrap 中的 `.col-xs-*` 类现在对于最小断点仅为 `.col-*`。
-->

帮助文本（原 .help-block）

使用 .form-text 类在表单输入框下方添加块级帮助文本或指导信息。这取代了旧的 .help-block 类。

<form>
  <div class="mb-3">
    <label for="inputPasswordHelp" class="form-label">密码</label>
    <input type="password" id="inputPasswordHelp" class="form-control" aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
      你的密码长度必须在 8-20 个字符之间，包含字母和数字，并且不能包含空格、特殊字符或表情符号。
    </div>
  </div>
  <div class="mb-3">
    <label for="inputUsernameHelp" class="form-label">用户名</label>
    <input type="text" id="inputUsernameHelp" class="form-control" aria-describedby="usernameHelpInline">
    <span id="usernameHelpInline" class="form-text">
      长度必须在 5-10 个字符之间。(这是使用 span 的内联帮助文本)
    </span>
  </div>
</form>

<!--
  无障碍：使用输入框上的 `aria-describedby` 属性将帮助文本与输入框关联，该属性指向帮助文本元素的 `id`。
  资源：Bootstrap 表单概述：https://getbootstrap.com/docs/5.3/forms/overview/#help-text
-->