自舉水平表單元素的順序混合起來了嗎？

Question

我正試圖用bootstrap創建一個水平表單佈局：兩個下拉框和一個輸入框。我已經成功地使用.form.inline類獲取元素的水平，但是由於我添加了這個類，出於某種原因，我的輸入框跳到了兩個下拉列表的左側，即使它跟在html的下拉菜單中。我需要它在下拉菜單的右側 - 任何解決方案？下面的代碼：

<form class=".form-inline" role="form"> 

     <!-- Department button --> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
      Department <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
     </div> 


     <!-- Course button --> 

     <div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
      Course Number <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
     </div> 


     <!--Professor Input--> 
      <div class="col-sm-4"> 
      <input type="text" class="form-control" id="input" placeholder="Instructor"> 
      </div> 

    </form> 

Answer 1

<form class=".form-inline" role="form">

請注意，您有class=".form-inline"的類時，它應該是class="form-inline"無期。

您還需要從.col-sm-4的input父div的類更改爲form-group