输入组
通过在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组来轻松扩展表单控件。
基本示例
在输入的任一侧放置一个附加组件或按钮。您也可以在输入的两侧放置一个。请记住将 <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>