html - 带有下拉菜单的 Bootstrap 4 导航栏错误

问题描述

我刚刚上传了一个测试页面当您单击它们时，您不会被定向到专辑页面链接。页面闪烁并快速跳转。这是现场测试页面，看看我的意思。这是现场测试页面，看看我的意思

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TEST JohnandCricket.com ALBUM 1</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><link rel=stylesheet type=text/css href=jquery.fancybox.min.css><link href="css/custom.css" rel="stylesheet"><meta name="author" content="John Samonas"><meta name="robots" content="index, follow"><meta name="description" content=""><!-- Open Graph general (Facebook, Pinterest & Google+) --><meta name="og:title" content="JohnandCricket.com"><meta name="og:description" content=""><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><meta name="theme-color" content="#ffffff"></head><body><header><img class="banner img-fluid lazy mx-auto" src="images/jcb.jpg" alt="John and Cricket banner"></header>

<div class="container-fluid">

<nav class="navbar navbar-expand-md navbar-custom"><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Photos</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="album1.html">Album 1</a></li>
<li><a class="dropdown-item" href="album2.html">Album 2</a></li>
<li><a class="dropdown-item" href="album3.html">Album 3</a></li>
<li><a class="dropdown-item" href="album4.html">Album 4</a></li>
</ul></li></ul></div></nav>

<div class="container">
<div class="embed-responsive embed-responsive-16by9 w-100">
<iframe style="min-height:100vh;" src="https://www.youtube.com/embed/S8smZWM_dl8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="clearfix"></div>
</div>
</div><script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script>var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy" });</script><script defer  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></body></html>

CSS：

body{color:#00008b;font-family:Georgia;font-size:22px}body,.masthead{background:url(../images/bg.jpg) no-repeat fixed center;background-size:cover}.masthead img{width:100%;height:180px;max-height:200px;height:auto}.container{background-color:snow;border-radius:2rem;margin:1.5rem auto;width:90%;}.navbar-custom{background-color:#32de84}.navbar-custom .navbar-brand,.navbar-custom .navbar-text{text-decoration:none;color:#000}a.navbar-brand:link,a.navbar-brand:visited{color:#32de84;text-decoration:none;background-color:#000;border-radius:50%;padding:.5rem}a.navbar-brand:hover,a.navbar-brand:focus{color:red;text-decoration:none}.navbar-custom .navbar-nav .nav-link{text-decoration:none;color:#000}.navbar-custom .nav-item.active .nav-link,.navbar-custom{text-decoration:none;color:#000}.nav-item .nav-link:hover{color:#000;background-color:#fff;border-radius:.5rem}.navbar-custom .dropdown-menu{background-color:#32de84}.navbar-custom .dropdown-item{text-decoration:none;color:#000}.navbar-custom .dropdown-item:hover,.navbar-custom .dropdown-item:focus{text-decoration:none;color:#000;background-color:#fff}@media (max-width:767px){nav.navbar{max-height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}}.navbar-toggler{border-color:rgb(255,255,255)}.navbar-toggler-icon{color:#fff}.navbar-toggler-icon:hover{background:#fff}span.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")}@media (max-width:767px){nav.navbar{max-height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}}#bgXXX{background:url(../images/bg.jpg);background-size:cover;background:no-repeat center center fixed}a{color:#00008b;text-decoration:none}a:hover,a:focus{color:#036;text-decoration:underline}a{color:#00008b;text-decoration:underline;a:hover{color:#036;text-decoration:underline}}h1,h2,h3,h4,h5,h6{color:#00008b}.img-fixed{padding-bottom:5px}.carousel-item .img-fluid{width:90%;height:auto}.carousel-item a{display:block;width:100%;height:auto}.carousel-control-prev{color:background-color:#3F0;margin-left:-1rem;z-index:10;text-decoration:none}.carousel-control-next{color:background-color:#3F0;;margin-right:-1rem;z-index:10;text-decoration:none}.carousel-controls a:hover{color:#00cc00;z-index:10;text-decoration:none}
.carousel-control-prev:hover{color:#458B00;text-decoration:none}
.carousel-control-next:hover{color:#458B00;text-decoration:none}.embed-responsive{width:90%;height:auto}#scroll{position:fixed;right:10px;bottom:10px;cursor:pointer;width:2.5rem;height:2.5rem;background-color:#3F0;text-indent:-9999px;display:none;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;opacity:.75}#scroll span{position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0;border:8px solid transparent;border-bottom-color:#fff}#scroll:hover{background-color:#3C0;opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}

我检查了https://validator.w3.org/nu/#textarea上的代码，它通过了。文件检查完成。没有要显示的错误或警告。

标签： htmltwitter-bootstrapbootstrap-4

html - 带有下拉菜单的 Bootstrap 4 导航栏错误

问题描述

解决方案

推荐阅读