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

Question

我正在尝试使用form-group并形成一个类似于给定的结构，但该按钮似乎与文本框不对齐。

我目前的代码是：

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

Answer 1

你有几个选择。第一个是将.form-horizontal与.form-group和Bootstrap网格系统结合起来。这会在输入字段旁边生成一个完全定义的按钮。

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

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-horizontal">
	<label for="artistname" class="control-label">Enter Artist Name</label>
	<div class="form-group">
		<div class="col-xs-9">
			<input id="artistname" type="text" ng-modal="artist1" class="form-control text_element_width" placeholder="Enter Artist Name." />
		</div>
	
		<div class="col-xs-3">
			<button type="button" class="btn btn-default btn-block" ng-click="addArtistChoice()"><span class="glyphicon glyphicon-plus"></span> Add Artist</button>
		</div>
	</div>
</div>

<hr />

<label for="artistname" class="control-label">Enter Artist Name</label>
<div class="input-group">
	<input id="artistname" type="text" ng-modal="artist1" class="form-control text_element_width" placeholder="Enter Artist Name." />
	<div class="input-group-btn">
			<button type="button" class="btn btn-default" ng-click="addArtistChoice()"><span class="glyphicon glyphicon-plus"></span> Add Artist</button>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，除了这两个示例之外，我还更改了您如何调用字形图标。