如何调整Navbar中Menu的位置？C#菜单居右问题求助

问题根源 #

你的代码存在两处布局错误导致Menu贴在屏幕右侧：

1. Bootstrap Navbar结构违规：collapse navbar-collapse 容器未放在 container-fluid 内部，破坏了Bootstrap的默认布局规则，导致导航内容无法正常对齐。
2. 标签嵌套错误：asp:Menu 被不必要地嵌套在 a.navbar-brand 标签内，既不符合语义规范，也干扰了正常的布局流。

修复方案 #

1. 修正Navbar核心结构 #

将包含Menu的 collapse navbar-collapse 容器移入 container-fluid 内部，确保所有Navbar内容都处于Bootstrap的布局容器中：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary navbar-fixed-top" >
  <div class="container-fluid">
    <a class="navbar-brand" href="/Default.aspx">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img class="auto-style1" src="MicrosoftTeams-image%20(5).png" />&nbsp;&nbsp;&nbsp; </a>
     
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 把collapse容器移到container-fluid内部 -->
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav">
        <li class="nav-item">
          <!-- 移除外层多余的a.navbar-brand标签 -->
          <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Font-Size="Large" BackColor="White" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Underline="False" ForeColor="White" Height="16px" RenderingMode="Table" StaticSubMenuIndent="10px" BorderColor="White">
            <DynamicHoverStyle BackColor="#003057" ForeColor="White" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle BackColor="#003057" HorizontalPadding="10px" VerticalPadding="5px" />
            <DynamicSelectedStyle BackColor="#003057" HorizontalPadding="10px" VerticalPadding="5px" />
            <Items>
              <!-- 保留原Menu所有Items内容 -->
              <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
              <asp:MenuItem Selectable="False" Text="&nbsp; |" Value="|"></asp:MenuItem>
              <asp:MenuItem Text="&nbsp; My Profile &nbsp; " Value="My Profile" NavigateUrl="~/My Profile.aspx"></asp:MenuItem>
              <!-- 剩余Items代码省略 -->
            </Items>
            <StaticHoverStyle BackColor="#003057" ForeColor="White" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" BackColor="#003057" />
            <StaticMenuStyle BackColor="#003057" />
            <StaticSelectedStyle BackColor="#003057" />
          </asp:Menu>
        </li>
      </ul>
    </div>
  </div>      
</nav>

2. 进一步左移Menu（可选） #

如果修正结构后仍需要调整位置，可通过以下两种方式：

方式一：自定义CSS调整

在页面的 <style> 标签中添加样式，给Menu设置右侧间距：

#Menu1 {
  margin-right: 20px; /* 数值越大，左移距离越远，按需修改 */
}

方式二：使用Bootstrap内置间距类

给包含Menu的 li.nav-item 添加 me-3（Bootstrap 5）或 mr-3（Bootstrap 4）类，直接通过框架内置类调整：

<li class="nav-item me-3">
  <asp:Menu ID="Menu1" runat="server" ...>
    <!-- Menu内容 -->
  </asp:Menu>
</li>

额外注意点 #

• 移除 ul.navbar-nav 上的 me-auto 类，该类会强制导航项左对齐并占据剩余空间，导致Menu被挤到最右侧。
• 切勿将 asp:Menu 嵌套在 <a> 标签内，asp:Menu 生成的菜单项本身已包含链接，嵌套会导致HTML语义错误并干扰布局。

内容的提问来源于stack exchange，提问作者user22190583