bootstrap带有下拉按钮的输入框_Bootstrap的输入框组样式

在input的任何一侧放置一个附加组件或按钮，您也可以在Input输入框的两面各放置一个组件（或按钮），我们不支持单个输入组合中有多个表单控制项，同时<label>必须在输入框组之外。

<div class="col">
	<div class="form-group input-group">
		<div class="input-group-prepend">
			<span class="input-group-text">@</span>
		</div>
		<input type="text" class="form-control" placeholder="用户名">
	</div>

	<div class="form-group input-group">
		<input type="text" class="form-control" placeholder="邮箱名">
		<div class="input-group-append">
			<span class="input-group-text">@example.com</span>
		</div>
	</div>

	<div class="form-group input-group">
		<div class="input-group-prepend">
			<span class="input-group-text">$</span>
		</div>
		<input type="text" class="form-control">
		<div class="input-group-append">
			<span class="input-group-text">.00</span>
		</div>
	</div>

	<!-- 左边，是网址 -->
	<div class="form-group input-group">
		<div class="input-group-prepend">
			<span class="input-group-text">https://example.com/users/</span>
		</div>
		<input type="text" class="form-control">
	</div>

	<!-- textarea -->
	<div class="form-group input-group">
		<div class="input-group-prepend">
			<span class="input-group-text">文本输入框</span>
		</div>
		<textarea class="form-control"></textarea>
	</div>
</div>

输入组尺寸

将相对表单大小的class样式加到.input-group中，其内容会自动调整大小，如.input-group-lg、.input-group-sm，不需要在每个元素上重重使用样式控制其大小。

<div class="col">
	<!-- 尺寸 -->
	<div class="form-group input-group mt-5 input-group-lg">
		<div class="input-group-prepend">
			<span class="input-group-text">大尺寸</span>
		</div>
		<input type="text" class="form-control">
	</div>
	<div class="form-group input-group">
		<div class="input-group-prepend">
			<span class="input-group-text">正常尺寸</span>
		</div>
		<input type="text" class="form-control">
	</div>
	<div class="form-group input-group  input-group-sm">
		<div class="input-group-prepend">
			<span class="input-group-text">小尺寸</span>
		</div>
		<input type="text" class="form-control">
	</div>
</div>