如何在同一行上使用Bootstrap樣式對齊三個ASP.NET控件？

Question

 <div id="search-container"> 
      <div class="form-inline"> 
       <asp:DropDownList ID="drpSearchFilter" runat="server" CssClass="form-control"> 
        <asp:ListItem>Title</asp:ListItem> 
        <asp:ListItem>Author</asp:ListItem> 
        <asp:ListItem>Keywords</asp:ListItem> 
       </asp:DropDownList> 
       <asp:TextBox ID="txtSearchBox" CssClass="form-control" runat="server"/> 
       <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-default" OnClick="btnSearch_Click"/> 
      </div> 
     </div> 

現在所有這些控件都出現在不同的行上。

Answer 1

嘗試這一個（從Bootstrap documentation）：

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="exampleInputName2">Name</label> 
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> 
    </div> 
    <button type="submit" class="btn btn-default">Send invitation</button> 
</form>