我有一个正常的表单（Twitter引导，而不是内联），但一个输入字段旁边有一个按钮（见下图）。所有输入字段的顶部都有一个标签。
正确的引导语法（最好不必添加我自己的CSS）是什么，以使内联表单组（输入字段及其旁边的按钮）具有非内联标签（即位于输入字段上方）？
<form>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" />
</div>
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<label for="coupon">Coupon</label> <!-- should behave like the other non-inlined form fields -->
<input type="text" class="form-control" />
</div>
</div>
<!-- should be inline aligned with the input field -->
<div class="col-xs-4">
<button class="btn btn-primary">Apply</button>
</div>
</div>
</form>
您可以使用Bootstrap已经提供的输入组类。
这样地：
JSFIDLE
代码段：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container">
<form>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="coupon">Coupon</label>
<!-- should behave like the other non-inlined form fields -->
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Apply</button>
</span>
</div>
</div>
</form>
您可以向按钮添加样式页边距顶部：24px。我假设这个按钮最终会有一个id或其他class来识别它。从这里开始，在样式表中创建一个选择器，并将其添加到那里，而不是像本例中的内联。
这里你有一个jsfiddle，如果你不希望它与边缘居中。你可以向这些div添加另一个类，这样你就不会改变所有默认的引导样式，但这只是为了向你展示如何做到这一点
.col-xs-7, .col-xs-4{
display:inline-block;
float:none;
}
