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 控制尺寸
一个输入框组可以包含多个输入框、按钮或下拉菜单