Hinzufügen von "Advanced Search Button" neben Suchleiste

Question

Ich habe viele Dinge ausprobiert, konnte aber nicht "Advanced Search Button" neben Suchleiste ausrichten. Sie können das Bild unten sehen.

Hier sind Codes I

verwendet

<div class="row"> 
    <div class="col-md-12"> 

     <center> 
      <form> 
       <div class="form-group"> 
        <div class="input-group" style="width:90%;"> 
         <input class="form-control" name="search" placeholder="ISBN, Yazar yada Kitap adı yazınız" autocomplete="off" autofocus="autofocus" type="text"> 
         <span class="input-group-addon" style="width:1%;"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span> 
        </div> 
        <button class="btn btn-default btn-sm">Advanced Search</button> 
       </div> 
      </form> 
     </center> 

    </div>@*col-md-12*@ 

</div>@*row*@ 

Dank

Answer 1

die Tasten einen Wrapper div .input-group-btn mit der Klasse geben.

Quelle http://getbootstrap.com/components/#input-groups-buttons-multiple

Answer 2

wenn Sie Bootstrap verwenden, versuchen Sie die Klasse „Pull-rechts“ oder „Pull-links“ hängt zu verwenden, was Sie wollen.

gibt es die Lösung. Ich hoffe,

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 

 
     <center> 
 
      <form> 
 
       <div class="col-md-12" style="width:50%; margin-left:25%;"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="row"> 
 
        <div class="input-group" > 
 
         <input class="form-control" name="search" placeholder="ISBN, Yazar yada Kitap adı yazınız" autocomplete="off" autofocus="autofocus" type="text"> 
 
         <span class="input-group-addon" style="width:1%;"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span> 
 
        </div> 
 
       </div> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <button class="btn btn-default btn-sm pull-right">Advanced Search</button> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
       </div> 
 
      </form> 
 
     </center> 
 

 
    </div> 
 

 
</div>