Benötigen Sie eine Schaltfläche neben Textfeld in Form Gruppe

Question

Ich versuche, form Gruppe ausrichten zu verwenden und eine Struktur wie angegeben bildet aber die Schaltfläche scheint nicht mit der Textbox auszurichten.

Mein aktueller Code ist:

<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

Sie haben ein paar Optionen hier. Der erste wäre, .form-horizontal mit .form-group und das Bootstrap Grid-System zu kombinieren. Dies führt zu einer vollständig definierten Schaltfläche neben dem Eingabefeld.

Aber Bootstrap hat eine Komponente für .input-group, mit der Sie die Schaltfläche direkt an den Eingang anbringen können; Das ist auch eine Option! Beispiele für beide folgen:

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

Bitte beachten Sie, dass zusätzlich zu den beiden Beispielen, ich Änderungen an, wie Sie Ihre Glyph-Symbol sind aufgerufen wird.