在ASP按钮和Bootstrap下拉菜单中未设置按钮对齐方式

debugcn 发表于 Dev

技术专家

我有一个ASP按钮和一个按钮下拉列表。问题是我的按钮下拉菜单始终位于其他按钮下方。我希望该按钮到达其他按钮行。

在这里，我粘贴了当前按钮的屏幕截图（下拉从Bootstrap 2.3截取）

我的编码在这里

<div class="alert alert-success">
    <a href="#" class="alert-link">
        <p align="right">
            Welcome <%=GetUserName()%>
            (Admin Level)
    </a>
    <asp:Button ID="btnUsr" class="btn btn-default" runat="server" OnClick="btnUsr_Click" Text="User Management"/>
    <asp:Button ID="btnUpload" class="btn btn-info" runat="server" OnClick="btnUpload_Click" Text="Upload Files" />
    <asp:Button ID="btnlogout" class="btn btn-success" runat="server" OnClick="btnlogout_Click" Text="LogOut" />

    <li class="dropdown" style="list-style: none;">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-primary">More <b class="caret"></b>
        </a>
        <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
            <li>
                <a href="SendSMS.aspx">Send SMS</a>
            </li>
            <li>
                <a href="CommonPageManagement.aspx">Manage Pages & Sections</a>
            </li>
        </ul>
    </li>

    <br />

</div>

像素像素

您可以尝试将按钮放在ul标签之间。我还没有测试过，但可以尝试以下方法：

<ul>
     <li><asp:Button ID="btnUsr" class="btn btn-default" runat="server" OnClick="btnUsr_Click" Text="User Management"/></li>
     <li><asp:Button ID="btnUpload" class="btn btn-info" runat="server" OnClick="btnUpload_Click" Text="Upload Files" /></li>
     <li><asp:Button ID="btnlogout" class="btn btn-success" runat="server" OnClick="btnlogout_Click" Text="LogOut" /></li>
     <li class="dropdown" style="list-style: none;">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle btn btn-primary">More <b class="caret"></b></a>
                <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                    <li>
                        <a href="SendSMS.aspx">Send SMS</a>
                    </li>
                     <li>
                        <a href="CommonPageManagement.aspx">Manage Pages & Sections</a>
                    </li>
                </ul>
            </li>
</ul>

我认为bootstrap有一个class，id也可以用来使ul显示成一行。另外，您可以将自己的css与bootstrap的css混在一起，但是我认为您应该小心，因为这可能与bootstrap中的css冲突。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。