Html 如何在引导导航栏中使用ASP.NET DropDownList

我有一个ASP.NET网页，我正在为UI使用引导。在导航栏中，我想使用ASP.NET DropDownList，但我无法让它像引导DrowDown一样渲染。当前我的导航栏如下所示：

当我希望它看起来更像这样时：

以下是我的导航栏HTML：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/About">About</a></li>
        <li><a runat="server" href="~/Contact">Contact</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
        <li>
            <asp:DropDownList runat="server" ID="ddlLanguage" AutoPostBack="true" CssClass="k-dropdown">
                <asp:ListItem Text="English" Value="en-us" />
                <asp:ListItem Text="Francais" Value="fr" />
            </asp:DropDownList>
        </li>
        <asp:LoginView runat="server" ViewStateMode="Disabled">
            <AnonymousTemplate>
                <li><a runat="server" href="~/Account/Login">Log in</a></li>
            </AnonymousTemplate>
            <LoggedInTemplate>
                <li><a runat="server" href="~/admin">Admin</a></li>
                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Logic.HelperFunctions.GetUser.FirstName %>!</a></li>
                <li>
                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                </li>
            </LoggedInTemplate>
        </asp:LoginView>
    </ul>
</div>

---

因此，我希望语言的DropDownList在右侧渲染，并垂直居中。如何调整CSS？服务器控件的CssClass似乎没有效果，我需要将该控件设置为服务器控件，因为服务器会根据选择语言选项的自动回发更改站点的语言。

我相信您缺少一些元素：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <asp:DropDownList runat="server" ID="ddlLanguage" AutoPostBack="true" CssClass="k-dropdown">
                    <asp:ListItem Text="English" Value="en-us" />
                    <asp:ListItem Text="Francais" Value="fr" />
                </asp:DropDownList>
            </li>
            <asp:LoginView runat="server" ViewStateMode="Disabled">
                <AnonymousTemplate>
                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                </AnonymousTemplate>
                <LoggedInTemplate>
                    <li><a runat="server" href="~/admin">Admin</a></li>
                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Logic.HelperFunctions.GetUser.FirstName %>!</a></li>
                    <li>
                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                    </li>
                </LoggedInTemplate>
            </asp:LoginView>
        </ul>
    </li>
</ul>

---

让我知道这是否有效。

我想出来了。主要的问题是ASP.NET控件将下拉选项呈现为一个元素，而Bootstrap需要一个

元素作为其下拉列表。我将我的选项手动呈现为

元素，并使用JavaScript执行回发。我的解决方案发布在下面

<ul class="nav navbar-nav navbar-right">
<li class="k-dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><asp:Literal runat="server" Text="<%$Resources:Resources, Language%>" /><span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#" onclick="javascript:__doPostBack('en-us','')">English</a></li>
        <li><a href="#" onclick="javascript:__doPostBack('fr','')">français</a></li>
        <li><a href="#" onclick="javascript:__doPostBack('es','')">Español</a></li>
    </ul>
</li>
</ul>

您的答案很接近，但也缺少一些标签。主要问题是ASP.NET控件将下拉选项呈现为一个元素，而Bootstrap为其下拉列表导出一个

元素。我将我的选项手动呈现为

元素，并使用JavaScript执行回发。我的解决方案发布在下面。