输入组

通过在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组来轻松扩展表单控件。

基本示例

在输入的任一侧放置一个附加组件或按钮。您也可以在输入的两侧放置一个。请记住将 <label> 放在输入组之外。

@
@example.com
https://example.com/users/
$ .00
@
带文本区域
<div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="用户名" aria-label="用户名" aria-describedby="basic-addon1">
      </div>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="收件人的用户名" aria-label="收件人的用户名" aria-describedby="basic-addon2">
        <span class="input-group-text" id="basic-addon2">@example.com</span>
      </div>

      <label for="basic-url" class="form-label">您的个人网址</label>
      <div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-text">.00</span>
      </div>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="用户名" aria-label="用户名">
        <span class="input-group-text">@</span>
        <input type="text" class="form-control" placeholder="服务器" aria-label="服务器">
      </div>

      <div class="input-group">
        <span class="input-group-text">带文本区域</span>
        <textarea class="form-control" aria-label="带文本区域"></textarea>
      </div>
包装

默认情况下,输入组通过 flex-wrap: wrap 进行包装,以便在输入组中适应自定义表单字段验证。您可以使用 .flex-nowrap 禁用它。

@
<div class="input-group flex-nowrap">
        <span class="input-group-text" id="addon-wrapping">@</span>
        <input type="text" class="form-control" placeholder="用户名" aria-label="用户名" aria-describedby="addon-wrapping">
      </div>
尺寸

将相对的表单大小类添加到 .input-group 本身,其中的内容将自动调整大小 - 无需在每个元素上重复表单控件大小类。

不支持调整单个输入组元素的大小。

默认
<div class="input-group input-group-sm mb-3">
        <span class="input-group-text" id="inputGroup-sizing-sm">小</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" id="inputGroup-sizing-default">默认</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
      </div>

      <div class="input-group input-group-lg">
        <span class="input-group-text" id="inputGroup-sizing-lg">大</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
      </div>
复选框和单选框

将任何复选框或单选选项放在输入组的插件中而不是文本中。当输入旁边没有可见文本时,我们建议将 .mt-0 添加到 .form-check-input

<div class="input-group mb-3">
        <div class="input-group-text">
          <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
        </div>
        <input type="text" class="form-control" aria-label="Text input with checkbox">
      </div>

      <div class="input-group">
        <div class="input-group-text">
          <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
      </div>
多个输入

虽然视觉上支持多个 <input>,但验证样式仅适用于具有单个 <input> 的输入组。

名字和姓氏
<div class="input-group">
        <span class="input-group-text">名字和姓氏</span>
        <input type="text" aria-label="名字" class="form-control">
        <input type="text" aria-label="姓氏" class="form-control">
      </div>
多个插件

支持多个附加组件,并且可以与复选框和单选输入版本混合使用。

$ 0.00
$ 0.00
<div class="input-group mb-3">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
        <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
      </div>

      <div class="input-group">
        <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
      </div>
按钮插件
<div class="input-group mb-3">
        <button class="btn btn-outline-secondary" type="button" id="button-addon1">按钮</button>
        <input type="text" class="form-control" placeholder="" aria-label="带有按钮插件的示例文本" aria-describedby="button-addon1">
      </div>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="收件人用户名" aria-label="收件人用户名" aria-describedby="button-addon2">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2">按钮</button>
      </div>

      <div class="input-group mb-3">
        <button class="btn btn-outline-secondary" type="button">按钮</button>
        <button class="btn btn-outline-secondary" type="button">按钮</button>
        <input type="text" class="form-control" placeholder="" aria-label="带有两个按钮插件的示例文本">
      </div>

      <div class="input-group">
        <input type="text" class="form-control" placeholder="收件人用户名" aria-label="带有两个按钮插件的收件人用户名">
        <button class="btn btn-outline-secondary" type="button">按钮</button>
        <button class="btn btn-outline-secondary" type="button">按钮</button>
      </div>
带有下拉菜单的按钮
<div class="input-group mb-3">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">周杰伦</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">东风破</a></li>
          <li><a class="dropdown-item" href="#">听见下雨的声音</a></li>
          <li><a class="dropdown-item" href="#">千里之外</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">夜的第七章</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="带有下拉按钮的文本输入">
      </div>

      <div class="input-group mb-3">
        <input type="text" class="form-control" aria-label="带有下拉按钮的文本输入">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">陈奕迅</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">淘汰</a></li>
          <li><a class="dropdown-item" href="#">富士山下</a></li>
          <li><a class="dropdown-item" href="#">孤勇者</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">六月飞雪</a></li>
        </ul>
      </div>

      <div class="input-group">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">王菲</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">红豆</a></li>
          <li><a class="dropdown-item" href="#">匆匆那年</a></li>
          <li><a class="dropdown-item" href="#">但愿人长久</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">容易受伤的女人</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="带有 2 个下拉按钮的文本输入">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">张学友</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">吻别</a></li>
          <li><a class="dropdown-item" href="#">心如刀割</a></li>
          <li><a class="dropdown-item" href="#">一千个伤心的理由</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">楚歌</a></li>
        </ul>
      </div>
分段按钮
<div class="input-group mb-3">
        <button type="button" class="btn btn-outline-secondary">选项</button>
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉列表</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">隋唐英雄传</a></li>
          <li><a class="dropdown-item" href="#">七侠五义</a></li>
          <li><a class="dropdown-item" href="#">聊斋志异</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">大唐狄公案</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="带分段下拉按钮的文本输入">
      </div>

      <div class="input-group">
        <input type="text" class="form-control" aria-label="带分段下拉按钮的文本输入">
        <button type="button" class="btn btn-outline-secondary">选项</button>
        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">切换下拉列表</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">增广贤文 </a></li>
          <li><a class="dropdown-item" href="#">儿女英雄传</a></li>
          <li><a class="dropdown-item" href="#">醒世恒言</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">世说新语</a></li>
        </ul>
      </div>
自定义表单

输入组包括对自定义选择和自定义文件输入的支持。不支持这些的浏览器默认版本。

自定义选择
<div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select" id="inputGroupSelect01">
          <option selected>请选择...</option>
          <option value="1">清稗类钞</option>
          <option value="2">一枕奇</option>
          <option value="3">七修类稿</option>
        </select>
      </div>

      <div class="input-group mb-3">
        <select class="form-select" id="inputGroupSelect02">
          <option selected>请选择...</option>
          <option value="1">七剑十三侠</option>
          <option value="2">七十二朝人物演义</option>
          <option value="3">万历野获编</option>
        </select>
        <label class="input-group-text" for="inputGroupSelect02">Options</label>
      </div>

      <div class="input-group mb-3">
        <button class="btn btn-outline-secondary" type="button">按钮</button>
        <select class="form-select" id="inputGroupSelect03" aria-label="示例选择按钮插件">
          <option selected>请选择...</option>
          <option value="1">永乐大典残卷</option>
          <option value="2">龙川略志</option>
          <option value="3">龙图公案</option>
        </select>
      </div>

      <div class="input-group">
        <select class="form-select" id="inputGroupSelect04" aria-label="示例选择按钮插件">
          <option selected>请选择...</option>
          <option value="1">包公案</option>
          <option value="2">齐民要术</option>
          <option value="3">齐东野语</option>
        </select>
        <button class="btn btn-outline-secondary" type="button">按钮</button>
      </div>
自定义文件输入
<div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupFile01">上传</label>
        <input type="file" class="form-control" id="inputGroupFile01">
      </div>

      <div class="input-group mb-3">
        <input type="file" class="form-control" id="inputGroupFile02">
        <label class="input-group-text" for="inputGroupFile02">上传</label>
      </div>

      <div class="input-group mb-3">
        <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">按钮</button>
        <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="上传">
      </div>

      <div class="input-group">
        <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="上传">
        <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">按钮</button>
      </div>