【发布时间】：2020-10-13 15:53:26
【问题描述】：
我正在尝试将导航栏从 Bootstrap 3 转换为 Bootstrap 4。由于某种原因，此 CSS 不再工作，即使我的 UL 在 3 和 4 中都有类“nav”。如何获取标记在 Bootstrap 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;
【问题讨论】：
标签： jquery css twitter-bootstrap