Блог

Я пытаюсь преобразовать панель навигации из Bootstrap 3 в Bootstrap 4. По какой-то причине этот CSS больше не работает, хотя мой UL имеет класс «nav» как в 3, так и в 4. Как мне заставить разметку применяться в Bootstrap 4?

Bootstrap 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 amp; 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>
  

Bootstrap 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 amp; 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>     
  

CSS для обоих, которые работают только с Bootstrap 3:

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

Это первое, что вам нужно сделать: «закрыть ваш li , потому что вы открываете planty of then, но никогда не закрываете их.

Вы действительно должны были правильно представить свой код, как я сделал, это было бы очевидно.

Добавьте сюда, кажется, он работает нормально:

 <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 amp; 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>