如何修复 TopMenu？ ASP.NET

Posted 2023-04-12

【中文标题】如何修复 TopMenu？ ASP.NET

【英文标题】：How to Fixed TopMenu? ASP.NET

【发布时间】：2020-09-06 06:07:11

【问题描述】：

没有固定

固定

固定 html (_Layout Side)

<div style="text-align:center; max-width:1200px; min-width:1200px; min-height:30px; padding:5px 0; text-align:left; left:26.3%; position:fixed; z-index:1" class="container">
    <a style="color:#e2c75b; font-weight:bold; font-size:20px; text-decoration:none;" asp-area="" asp-page="/Index">
        <img src="~/Images/abc.png"   style="border: 0; float: left; margin-right: 10px;"/>
        <span>ABC</span>
    </a>
</div>

<main role="main" class="pb-3">
    @RenderBody()
</main>

这将重叠。

可读性很差。对不起。请。

我希望它像图片一样出来，没有固定。修复时

【问题讨论】：

请说明您遇到的问题。

【参考方案1】：

好的，我看到您正在顶部创建一个固定的 div，它与您的 html 元素的其余部分重叠。这是一件容易理解的事情，当您将某些东西固定在顶部时，您应该为其他元素留出足够的空间。我注意到你正在使用bootstrap4，因为你正在使用一个pb-3 类，那么我建议除了重新发明***之外，你应该使用引导类来实现你正在做的事情。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#">
      <img src="~/Images/abc.png"   style="border: 0; float: left; "/>
  </a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

现在您应该设置包含身体其余部分的 div 元素的 body 或 margin 的填充。

<main role="main" class="pb-3" style='margin-top: 80px'>
    @RenderBody()
</main>

如果您仍然想坚持自己的代码而不是引导程序，那么只需设置您拥有的主要元素的相关边距。

【讨论】：

很抱歉我不会说英语。我用你的回答解决了这个问题。非常感谢。我使用了你的一些答案来做出我想要的答案。非常感谢。

【参考方案2】：

我使用了这样的 Jamshaid Kamran 答案。

<nav class="navbar navbar-expand-sm bg-white navbar-dark fixed-top" style="background-color:white;width:100%; height:40px;">
    <div style="text-align:left; width:1200px; margin-left:auto; margin-right:auto">
        <a style="color:#e2c75b; font-weight:bold; font-size:18px; text-decoration:none;" asp-area="" asp-page="/Index">
            <img src="~/Images/abc.png"   style="border: 0; margin-right: 0px;" />
            <span>NcoreSoft</span>
        </a>
    </div>
</nav>