我剛剛上傳了一個測驗頁面 當您點擊它們時，您不會被定向到專輯頁面鏈接。頁面閃爍并快速跳轉。這是實時測驗頁面以了解我的意思。這是實時測驗頁面以了解我的意思
<!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/[email protected]/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,")}@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上的代碼并通過了。檔案檢查完成。沒有要顯示的錯誤或警告。
uj5u.com熱心網友回復：
發生這種情況是因為您使用的是 Bootstrap 4，但負責切換.dropdown-menu子選單的按鈕鏈接當前正在使用關聯的 Bootstrap 5 資料切換屬性。
Bootstrap 4與5：
data-toggle vs data-bs-toggle
這應該解決它：
<a class="nav-link dropdown-toggle" ... data-toggle=" ...>Photos</a>
Bootstrap 5 使用您當前的屬性：
<a class="nav-link dropdown-toggle" ... data-bs-toggle=" ...>Photos</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/354753.html
標籤：html 推特引导 bootstrap-4