如何使用引导程序对多个文本和按钮进行分组？答案

【问题标题】：How to group multiple text and buttons using bootstrap?如何使用引导程序对多个文本和按钮进行分组？
【发布时间】：2018-02-18 21:59:38
【问题描述】：

尝试使用引导程序对一些按钮和文本字段进行分组，但看起来很奇怪。我检查了互联网上的许多资源，但没有帮助。对于一个按钮和文本，它完美无缺。

最好是这样的：

但它们看起来像这样：

2 按钮总是下拉，无论我尝试什么。我想知道是否甚至可以使用 Bootstrap 来做到这一点。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="input-group btn-block">
		<span class="input-group-btn">
			<input type="button" value="-10" class="form-control">
			<input type="button" value="-1" class="form-control">
		</span>
		<input type="text" value="10" class="form-control">
		<span class="input-group-btn">
			<input type="button" value="+1" class="form-control">
			<input type="button" value="+10" class="form-control">
			<button type="submit" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
			<button type="button" class="btn btn-danger"><i class="fa fa-times-circle"></i></button>
		</span>
	</div>

提前非常感谢！

【问题讨论】：

标签： html forms bootstrap-4

【解决方案1】：

这是我如何让它工作的...我删除了跨度并添加了一个宽度为 50px 的样式，但是您可以保留跨度，我只是删除了它们以清理一些混乱...将宽度调整为你的喜好。

<div class="input-group btn-block">
        <input type="button" value="-10" class="form-control" style="width: 50px;">
        <input type="button" value="-1" class="form-control" style="width: 50px;">
        <input type="text" value="10" class="form-control" style="width: 50px;">
        <input type="button" value="+1" class="form-control" style="width: 50px;">
        <input type="button" value="+10" class="form-control" style="width: 50px;">
        <button type="submit" class="btn btn-primary" style="width: 50px;"><i class="fa fa-refresh"></i></button>
        <button type="button" class="btn btn-danger" style="width: 50px;"><i class="fa fa-times-circle"></i></button>
</div>

【讨论】：

【解决方案2】：

你好试试下面的代码使用Input-group

<div class="row">
<div class="col-xs-6">
<div class="input-group">
<button type="button" class="btn btn-primary">-10</button>
<button type="button" class="btn btn-primary">-1</button>
<input type="text" class="form-control"/>
<button type="button" class="btn btn-primary">-10</button>
<button type="button" class="btn btn-primary">-1</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-refresh"></i>
</button>
<button type="button" class="btn btn-danger"><i class="fa fa-times-circle">
</i></button>
</div>
</div>
</div>

看下面的小提琴

Fiddle Demo

【讨论】：