ブートストラップとテキストボックスを並べて表示

Question

dropdownとinputを次の図のように並べて表示しようとしています。

私は、インラインフォームや入力グループを試してみたが、私が見てきたすべての例は、これまでのところ、以下のスパンでstatic textの整列と側面

によってinput制御側について示しているものです私は

<div class="form-inline"> 
    <div class="form-group"> 
    <select class="form-control" id="phonetype"> 
       <option value="">Select Phone Type</option> 
       <option value="Passport">Mobile Phone</option> 
       <option value="SSN">Work Phone</option> 
       </select> 
    <input class="form-control" id="phone" name="phone" type="text" placeholder=""> 
    </div> 
</div> 

JSBin

Answer 1

を試してみた

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="form-group"> 
 
<div class=""> 
 
    <div class="form-inline"> 
 
    <div class="form-group col-xs-6"> 
 
     <select class="form-control" id="phonetype"> 
 
        <option value="">Select Phone Type</option> 
 
        <option value="Passport">Mobile Phone</option> 
 
        <option value="SSN">Work Phone</option> 
 
       </select> 
 
       </div> 
 
       <div class="form-group col-xs-6"> 
 
     <input class="form-control" id="phone" name="phone" type="text" placeholder=""> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ようなものを試してみてください：

<div class="container"> 
    <div class="row"> 
    <div class="form-inline"> 
     <div class="form-group navbar navbar"> 
     <select class="form-control nav navbar-nav navbar-static-top" id="phonetype"> 
      <option value="">Select Phone Type</option> 
      <option value="Passport">Mobile Phone</option> 
      <option value="SSN">Work Phone</option> 
     </select> 
     <input class="form-control nav navbar-nav navbar-static-top" id="phone" name="phone" type="text" placeholder=""> 
     </div> 
    </div> 
    </div> 
</div> 

それは、この生成します。あなたの答えのための

Screen