Bootstrap 2.3.2 - 右键对齐一个带有输入的按钮，其内部为水平形式

Question

我在使用Twitter Bootstrap 2.3.2

设置以下表单时遇到问题

我似乎无法将按钮与其他标签对齐。另外，我无法让最后一个文本框与按钮一致。

这是我目前的表格：JSFiddle example

<form class="form-horizontal">

<div class="control-group">
    <label class="control-label" for="inputFirstname">First name</label>
    <div class="controls">
        <input type="text" id="inputFirstname" placeholder="First name">
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputSurname">Surname</label>
    <div class="controls">
        <input type="text" id="inputSurname" placeholder="Surname">
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>

<div class="control-group">
    <button class="btn btn-primary">Browse</button>
    <div class="controls">
        <input type="text" id="inputSomeText" placeholder="Some text">
    </div>
</div>

这是我尝试实现的最终结果：

非常感谢任何帮助!!

Answer 1

更改上一个control-group并将margin-top:-5px;添加到按钮（通过课程label-btn显示如下）：

最后control-group的HTML：

<div class="control-group">
    <label class="control-label"><button class="btn btn-primary inline label-btn">Browse</button></label>
    <div class="controls">
        <input type="text" id="inputSomeText" placeholder="Some text">
    </div>
</div>

CSS

.label-btn {
    margin-top: -5px;
}

Updated fiddle

Answer 2

将最后一个控制组更改为此

    <div class="control-group">
        <label class="control-label">
            <button class="btn btn-primary inline">Browse</button>
        </label>
        <div class="controls">
            <input type="text" id="inputSomeText" placeholder="Some text">
        </div>
    </div>