Twitter bootstrap 需要对齐表单组中文本框旁边的按钮

我试图使用表单组，并形成一个类似给定的结构，但按钮似乎没有与文本框对齐

我目前的代码是：

<div class="form-group">
        <span for="artistname" class="control-label">Enter Artist Name</span></br>
        <input id="artistname" type="text" ng-modal="artist1" class="form-control text_element_width" placeholder="Enter Artist Name." />
        <button type="button" class="btn btn-default glyphicon glyphicon-plus" ng-click="addArtistChoice()">Add Artist</button>
    </div>
    <div data-ng-repeat="artist in artists" class="form-group">
        <input type="text" ng-modal="{{artist.artistName}}" class="form-control text_element_width" placeholder="Enter Artist Name.">
        <a href=""><span class="glyphicon glyphicon-trash" ng-click="removeArtistChoice(artist)" /></a>
    </div>

---

你有几个选择。第一种方法是将.form horizontal与.form group和引导网格系统相结合。这将导致在输入字段旁边有一个完全定义的按钮

但是Bootstrap有一个.input组的组件，允许您将按钮直接粘贴到输入上；所以这也是一个选择！这两方面的例子如下：

输入艺术家姓名 添加艺术家 输入艺术家姓名 添加艺术家