使用 bootstrap 4.6.0 的横幅导航栏

Question

我正在尝试在 VS 2019 中创建响应式母版页，我使用的是 Bootstrap 4.6.0。在桌面视图中，我希望导航栏位于横幅图像的左下方，但在移动视图中，我需要导航栏按钮一直位于右侧。我应该向导航栏标签添加样式属性以将其放在正确的位置吗？

更新：更新了 Konstantinos Gallis 建议的更改。我还将 data-hover 更新为 data-toggle 以更正我项目中的下拉菜单，但它似乎在此处不起作用。

    
      .MenuFormat {
        background-color:#224474;
        font-family: open-sans, sans-serif;
        color: white!important;
        font-weight: 700;
        font-size: 24px;
        padding-right: 25px;
      }

      nav {
        bottom: 0;
      }

      @media only screen and (max-width: 600px) {
        nav {
          right: 0;
          bottom: unset;
        }
      }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <img src="https://i.ibb.co/FsP4kyJ/Temp-Banner.png" class="mx-auto img-fluid" style="width:100%;height:auto;" />

<div class="position-relative">
    <!-- MENU - START -->
    <nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;height:50px;padding:0!important;">

    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#TempNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    
        <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="TempNavBar" >
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddHome" role="button" data-toggle="dropdown" aria-expanded="false" >
                    Home
                </a>
                <div class="dropdown-menu" aria-labelledby="nddHome">
                    <a class="dropdown-item" href="#">Newsletters</a>
                    <a class="dropdown-item" href="#">News</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddAbout" role="button" data-toggle="dropdown" aria-expanded="false">
                    About
                </a>
                <div class="dropdown-menu" aria-labelledby="nddAbout">
                  <a class="dropdown-item" href="#">Directors</a>
                  <a class="dropdown-item" href="#">FAQs</a>
                </div>
            </li>     
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddServices" role="button" data-toggle="dropdown" aria-expanded="false">
                    Services
                </a>
                <div class="dropdown-menu" aria-labelledby="nddServices">
                  <a class="dropdown-item" href="#">Service 1</a>
                  <a class="dropdown-item" href="#">Service 2</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddLocations" role="button" data-toggle="dropdown" aria-expanded="false">
                    Locations
                </a>
                <div class="dropdown-menu" aria-labelledby="nddLocations">
                  <a class="dropdown-item" href="#">Location 1</a>
                  <a class="dropdown-item" href="#">Location 2</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link MenuFormat" aria-current="page" href="#">Contact Us</a>
            </li> 
        </ul>
    </div>
  </nav>
      <!-- MENU - END   -->
     
    
  </div>

感谢您给我的任何帮助或指导。

Answer 1

从 nav 中删除 class fixed-top，替换为：

<nav class="navbar navbar-light navbar-expand-sm bg-light fixed-top position-absolute" style="z-index:100;">

与：

<nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;">`

将 class ml-auto 添加到 .navbar-toggler，替换为：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#TempNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

与：

 <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#TempNavBar"

在您的样式中添加以下行：

nav {
  bottom: 0;
}

@media only screen and (max-width: 600px) {
  nav {
    right: 0;
    bottom: unset;
  }
}

用 div 和 class position-relative

nav

img

<div class="position-relative">
    <nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;">
....
...
...
    <img src="https://i.ibb.co/FsP4kyJ/Temp-Banner.png" class="mx-auto img-fluid" style="width:100%;height:auto;" />
</div>

使用 bootstrap 4.6.0 的横幅导航栏

Navbar over banner using bootstrap 4.6.0

html

bootstrap-4