ブートストラップボタンアドオンがブートストラップモーダル内に正しく表示されない

Question

ボタンアドオンをモーダルの内側に配置しましたが（htmlは下です）、ボタンはテキストを入力するために隣接していません。私はボタンのアドオンをcol-md-6の中に置いてみましたが、それはデスクトップビューのみに役立ちますが、モバイルではまだ適切に動作しません。何か案は？どのCSSルールがボタンに参加できないのですか？

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="exampleModalLabel">Some text: <span id="numberOfMatches"></span>.</h4> 
      </div> 
      <div class="modal-body">        
        <div class="input-group">          
         <input type="text" class="form-control" id="modalCustomerNameInput" placeholder="Customer name.."> 
         <span class="input-group-btn"> 
          <button class="btn btn-default" type="button" data-request-url="..." onclick="SelectCustomer(customerCode.value, $(this).data('request-url'))"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
         </span> 
        </div>  
       <div class="list-group" id="customersListInModal">         
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>         
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたはinputとbuttonアクションが、それらを含む無<form>タグを持っています。

buttonをa nchorタグにしてから、他の関数を呼び出す前にpreventDefault（）メソッドを使用してください。