在 Bootstrap 中，.form-control 类通常用于 <input>、<select> 和 <textarea> 元素，以赋予它们统一的样式和大小。而 .input-group 类则用于将这些表单控件组合起来，并且可以添加前缀或后缀元素，以增强表单的可用性和可读性。
添加前缀或后缀元素的步骤
创建一个
<div>容器：首先，你需要创建一个带有.input-group类的<div>容器，这个容器将包裹你的输入框和前缀或后缀元素。添加
<input>元素：在<div>容器内部，添加一个带有.form-control类的<input>元素。添加前缀或后缀元素：在相同的
<div>内，使用<span>元素并赋予它.input-group-addon类来创建前缀或后缀元素。将这个<span>元素放置在<input>元素的前面或后面。避免使用
<select>元素：由于兼容性问题，避免在 WebKit 浏览器中使用<select>元素作为前缀或后缀。避免直接向表单组应用类：不要直接向
<input>元素应用.input-group类，因为.input-group是一个独立的组件，应该包裹在<input>元素外面。
代码示例
以下是一个包含前缀和后缀元素的基本输入框组的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Group Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/* 为了演示，添加了一些内边距 */
.bs-example {
padding: 100px 100px 10px;
}
</style>
</head>
<body>
<div class="bs-example">
<form class="bs-example-form" role="form">
<!-- 前缀元素 -->
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitter Handle">
</div>
<!-- 后缀元素 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<!-- 前缀和后缀元素 -->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>
<!-- 引入Bootstrap JS和jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
