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

我尝试使用表单组，并形成如下的结构给出，但按钮似乎并不与文本框对齐。

我当前的代码是：

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

来源

2017-07-25 user2681668

你有几个选择这里。第一个是将.form-horizontal与.form-group和引导网格系统相结合。这会导致与输入字段相邻的完全定义的按钮。

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

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

 
<hr /> 
 

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

请注意，除了这两个例子，我修改了你怎么呼唤你的雕文的图标。

来源

2017-07-25 16:41:16

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

回答

相关问题