如何右键对齐表单中标签旁边的按钮？

Question

我已尝试将.pull-right添加到按钮，但这两个元素不再垂直对齐，并且.form-group个input元素的边距会变小。

http://jsfiddle.net/Nmvk6/

HTML

<form class="form">
    <div class="form-group">
        <label>Type</label>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-plus-sign"></span>
        </button>
    </div>
    <div class="form-group">
        <select class="form-control half-width-form-control">
            <option value="foo">foo</option>
            <option value="bar">bar</option>
        </select>
        <input class="form-control half-width-form-control" type="number"></input>
    </div>
</form>

Answer 1

您可以将表单横向版本与.form-horizontal一起使用，并添加.control-label以使您的标签垂直对齐：

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="control-label">Type</label>
            <button class="btn btn-default pull-right">
                <span class="glyphicon glyphicon-plus-sign"></span>
            </button>
        </div>
        <div class="form-group">
            <select class="form-control half-width-form-control">
                <option value="foo">foo</option>
                <option value="bar">bar</option>
            </select>
            <input class="form-control half-width-form-control" type="number"></input>
        </div>
    </form>
</div>

<强> Updated Fiddle

>> Bootstrap doc, about horizontal forms