Bootstrap 输入框组
使用 Bootstrap 创建带前缀、后缀的输入框组
问题
如何使用 Bootstrap 制作输入框组（Input Group），实现在输入框前后添加文本、图标或按钮？
解答
Bootstrap 输入框组通过 .input-group 类创建，配合 .input-group-text 添加前缀/后缀内容。
基础输入框组
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
<!-- 前缀文本 -->
<div class="input-group g2dki">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="用户名">
</div>
<!-- 后缀文本 -->
<div class="input-group g2dki">
<input type="text" class="form-control" placeholder="邮箱">
<span class="input-group-text">@example.com</span>
</div>
<!-- 前后都有 -->
<div class="input-group g2dki">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="金额">
<span class="input-group-text">.00</span>
</div>
</body>
</html>带按钮的输入框组
<!-- 搜索框 -->
<div class="input-group g2dki">
<input type="text" class="form-control" placeholder="搜索...">
<button class="btn btn-primary" type="button">搜索</button>
</div>
<!-- 多个按钮 -->
<div class="input-group g2dki">
<input type="text" class="form-control" placeholder="内容">
<button class="btn btn-outline-secondary" type="button">复制</button>
<button class="btn btn-outline-secondary" type="button">粘贴</button>
</div>带下拉菜单的输入框组
<div class="input-group g2dki">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown">
选择
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项 1</a></li>
<li><a class="dropdown-item" href="#">选项 2</a></li>
</ul>
<input type="text" class="form-control">
</div>
<!-- 需要引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>不同尺寸
<!-- 小尺寸 -->
<div class="input-group input-group-sm g2dki">
<span class="input-group-text">小</span>
<input type="text" class="form-control">
</div>
<!-- 默认尺寸 -->
<div class="input-group g2dki">
<span class="input-group-text">中</span>
<input type="text" class="form-control">
</div>
<!-- 大尺寸 -->
<div class="input-group input-group-lg g2dki">
<span class="input-group-text">大</span>
<input type="text" class="form-control">
</div>多个输入框
<!-- 姓名输入 -->
<div class="input-group g2dki">
<span class="input-group-text">姓名</span>
<input type="text" class="form-control" placeholder="姓">
<input type="text" class="form-control" placeholder="名">
</div>关键点
.input-group是容器类，包裹所有输入框组元素.input-group-text用于添加文本或图标前缀/后缀- 按钮直接放入
.input-group中，无需额外包装类 - 通过
.input-group-sm或.input-group-lg控制尺寸 - 一个输入框组可以包含多个输入框、按钮或下拉菜单
目录