使用引導程序在單行上輸入多個字段和按鈕

Question

我有以下單行，包含一個搜索輸入欄和2個按鈕。我如何設置這個樣式，使搜索輸入框根據其旁邊的按鈕變小？我想在搜索框的右側和圖像中顯示的按鈕的左側添加2個更多的輸入字段。有沒有辦法做到這一點，而不使用「col-md-x」？

http://i.imgur.com/r4kqYm0.png

這是我迄今爲止，但我覺得這是非常哈克。

<div class="col-md-10 search-left"> 
    <form> 
     <div class="form-group"> 
      <div class="input-group"> 
       <div class="input-group-btn" dropdown> 
        <button type="button" class="btn btn-default dropdown-toggle first-dropdown" dropdown-toggle> 
         <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li></li> 
        </ul> 
       </div> 
       <div class="input-group-btn" dropdown> 
        <button type="button" class="btn btn-default dropdown-toggle second-dropdown" 
         <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li></li> 
        </ul> 
       </div> 
       <input type="text" class="form-control" placeholder="Search term" ng-model="search.value"> 
      </div> 
     </div> 
    </form> 
</div> 
<div class="col-md-2 search-right"> 
    <div class="pull-right" popover="Please select rows to export" popover-trigger="mouseenter"> 
     <button class='btn btn-default'><span class="glyphicon glyphicon-download-alt"></span></button> 
    </div> 
    <div class="pull-right"> 
     <button class='btn btn-default add-item' ng-click="addItem()">Add Staff</button> 
    </div> 
</div> 

Answer 1

將.form-inline添加到您的窗體（對於左對齊和內嵌塊控件而言，不一定是a）。