未在 asp 按钮和 Bootstrap 下拉菜单中设置按钮对齐答案

【问题标题】：Button alignment not set in asp buttons & Bootstrap dropdown未在 asp 按钮和 Bootstrap 下拉菜单中设置按钮对齐
【发布时间】：2014-12-21 21:17:16
【问题描述】：

我有一个 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>

【问题讨论】：

标签： c# css asp.net twitter-bootstrap

【解决方案1】：

您可以尝试将按钮放在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 冲突。

【讨论】：

@Techguy，成功了吗？如果你解决了你的问题，请分享！

【解决方案2】：

您应该将内容包装到行类：

<div class="row">
... content  ...
</div>

如果您想将内容右对齐，只需使用 pull-right 类而不是 p align。

我建议通读引导文档，您可以在其中找到网格系统描述。

【讨论】：

但我的按钮下拉菜单仍然显示在其他按钮下方