検索バーの隣に「詳細検索ボタン」を追加する

Question

多くのことを試みましたが、検索バーの隣に「詳細検索ボタン」を並べることができませんでした。あなたは下の写真を見ることができます。ここで

は私が

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

を使用されるコードがあるおかげ

Answer 1

は、ボタンにクラス.input-group-btnとラッパーのdivを与えます。

ソースhttp://getbootstrap.com/components/#input-groups-buttons-multiple

Answer 2

ブートストラップを使用している場合は、クラス「プルライト」を使用または「プル左の」あなたが望むものに依存してみてください。

解決策があります。私は

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