如何在同一行上使用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文檔中 ）：

<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>