引導直列形式的一個元素推標籤左

Question

這是它是如何渲染（鉻）http://i.imgur.com/aQS5j5r.png

我希望做兩件事情：

使我公司的下拉標籤的舉動像頂部其他人，然後將搜索框和公司下拉內容與其餘字段一起推入。

這不是一個空間問題（或者至少我不認爲它是）。如果我刪除公司下拉列表和聯繫人姓名以外的所有表單元素，我會得到相同的行爲。

生成的代碼：

<form action="/TicketViewer" method="post" class="form-inline"> 
    <div class="form-group"> 
     <label for="inquiryID">Inquiry ID</label> 
     <input type="text" class="form-control" id="inquiryID" name="inquiryID" placeholder="e.g. 7-2931"> 
    </div> 
    <div class="form-group"> 
     <label for="contactName">Contact Name</label> 
     <input type="text" class="form-control" id="contactName" name="contactName" placeholder="e.g. gavin (case insensitive) "> 
    </div> 
    <div class="form-group"> 
     <label for="searchKeyword">Search Keyword</label> 
     <input type="text" class="form-control" id="searchKeyword" name="searchKeyword" placeholder="e.g. added mailbox (case insensitive)"> 
    </div> 
    <div class="form-group"> 
     <label for="selectedCompany">Company</label> 
     <select class="form-control" id="SelectedCompany" name="SelectedCompany"><option value=""></option> 
<option>SNIPPED</option> 
</select> 
    </div> 
    <div class="form-group"> 
     <label for="sel1">Engineer</label> 
     <select class="form-control" id="engineer" name="engineer"> 
      <option value="" default selected>All Engineers</option> 
      <option>REDACTED LIST/option> 
     </select> 
    </div> 
    <button type="submit" class="btn btn-default">Search</button> 
</form> 

Answer 1

也許這將是最好使用引導網格佈局，以顯示形式： http://getbootstrap.com/css/#grid 在這裏你可以做到這一點的佈局，網格嵌套。這裏是一個例子

<div class="col-sm-3"> 
    <div class="row"> 
     <div class="col-sm-12">text</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12">textbox</div> 
    </div> 
</div>