如何使用bootstrap对多个文本和按钮进行分组？

Question

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

它的首选方式如下：

但他们看起来像这样：

2按钮总是下降，无论我尝试什么。 我想知道是否可以使用Bootstrap来实现它。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

非常感谢提前！

Answer 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>

Answer 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