0

我正在尝试将导航栏从 Bootstrap 3 转换为 Bootstrap 4。由于某种原因，这个 CSS 不再工作，即使我的 UL 在 3 和 4 中都有类“nav”。我如何获得标记以应用于引导程序 4？

引导程序 3 HTML：

    <nav id="toprightnav" class="navbar navbar-static-top" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>
    
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="navbar-collapse">
                  <ul class="nav navbar-nav">
                    <li class="dropdown"><a role="button" aria-haspopup="false" aria-expanded="false" href="https://www.uvm.edu/femc/data" class=headernavli" >Data</a><ul class="dropdown-menu"></ul></li><li class="dropdown"><a role="button" aria-haspopup="false" aria-expanded="false" href="https://www.uvm.edu/femc/monitoring" class=headernavli" >Monitoring</a><ul class="dropdown-menu"></ul></li><li class="dropdown"><a data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/cooperative" class=headernavli" >Cooperative</a><ul class="dropdown-menu"><li><a href="https://www.uvm.edu/femc/cooperative">Overview</a></li><li><a href="https://www.uvm.edu/femc/cooperative/regional_projects">Regional Projects</a></li><li><a href="https://www.uvm.edu/femc/cooperative/conference">Conferences</a></li><li><a href="https://www.uvm.edu/femc/cooperative/committees">Committees</a></li><li><a href="https://www.uvm.edu/femc/cooperative/directory">Directory</a></li><li><a href="https://www.uvm.edu/femc/cooperative/join">Join</a></li><li><a href="https://www.uvm.edu/femc/cooperative/orgs">Organizations</a></li><li><a href="https://www.uvm.edu/femc/cooperative/news_events">News/Events</a></li></ul></li><li class="dropdown"><a data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/products" class=headernavli" >Products & Services</a><ul class="dropdown-menu"><li><a href="https://www.uvm.edu/femc/products/tools">Tools</a></li><li><a href="https://www.uvm.edu/femc/products/collections">Collections</a></li><li><a href="https://www.uvm.edu/femc/products/reports">Reports</a></li><li><a href="https://www.uvm.edu/femc/services">Services</a></li></ul></li><li class="dropdown"><a data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/about" class=headernavli" >About</a><ul class="dropdown-menu"><li><a href="https://www.uvm.edu/femc/about">Overview</a></li><li><a href="https://www.uvm.edu/femc/about/staff">Staff</a></li><li><a href="https://www.uvm.edu/femc/about/partnerships">Partnerships</a></li><li><a href="https://www.uvm.edu/femc/about/strategic_plan">Strategic Plan</a></li><li><a href="https://www.uvm.edu/femc/about/contact">Contact</a></li></ul></li>              </ul>
              </div>
            </nav>

引导程序 4 HTML：

    <nav id="toprightnav" class="navbar navbar-light navbar-expand-md" role="navigation">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
                <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="navbar-collapse">
                  <ul class="nav nav-pills navbar-nav mr-auto">
                    <li class="nav-item"><a role="button" aria-haspopup="false" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/data" class="headernavli nav-link" >Data</a><div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"></div><li class="nav-item"><a role="button" aria-haspopup="false" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/monitoring" class="headernavli nav-link" >Monitoring</a><div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"></div><li class="nav-item dropdown"><a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/cooperative" class="headernavli nav-link" >Cooperative</a><div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative">Overview</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/regional_projects">Regional Projects</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/conference">Conferences</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/committees">Committees</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/directory">Directory</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/join">Join</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/orgs">Organizations</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/news_events">News/Events</a></div><li class="nav-item dropdown"><a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/products" class="headernavli nav-link" >Products & Services</a><div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/products/tools">Tools</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/products/collections">Collections</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/products/reports">Reports</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/services">Services</a></div><li class="nav-item dropdown"><a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/about" class="headernavli nav-link" >About</a><div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about">Overview</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/staff">Staff</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/partnerships">Partnerships</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/strategic_plan">Strategic Plan</a><a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/contact">Contact</a></div>              </ul>
              </div>
            </nav>

仅适用于 Bootstrap 3 的 CSS：

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    border-bottom: 3px solid #b8d87a;
    background-color: transparent;
4

1 回答 1

0

这是你需要做的第一件事：“关闭你的li，因为你当时打开了植物，但从不关闭它们。

你真的应该像我一样正确地展示你的代码，这很明显。

在这里添加它似乎工作正常：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<nav id="toprightnav" class="navbar navbar-light navbar-expand-md" role="navigation">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav nav-pills navbar-nav mr-auto">
      <li class="nav-item">
        <a role="button" aria-haspopup="false" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/data" class="headernavli nav-link" >Data</a>
        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"></div>
      </li>
      <li class="nav-item">
        <a role="button" aria-haspopup="false" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/monitoring" class="headernavli nav-link" >Monitoring</a>
        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"></div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/cooperative" class="headernavli nav-link" >Cooperative</a>
        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative">Overview</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/regional_projects">Regional Projects</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/conference">Conferences</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/committees">Committees</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/directory">Directory</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/join">Join</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/orgs">Organizations</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/cooperative/news_events">News/Events</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/products" class="headernavli nav-link" >Products & Services</a>
        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/products/tools">Tools</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/products/collections">Collections</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/products/reports">Reports</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/services">Services</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="https://dev.vmc.w3.uvm.edu/xana/about" class="headernavli nav-link" >About</a>
        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about">Overview</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/staff">Staff</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/partnerships">Partnerships</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/strategic_plan">Strategic Plan</a>
          <a class="nav-link" href="https://dev.vmc.w3.uvm.edu/xana/about/contact">Contact</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

于 2020-10-13T16:27:15.417 回答