單擊時如何阻止我的引導程序漢堡包圖標和可折疊菜單跳躍？
[英]How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?
問題描述
我試圖讓漢堡包菜單像原來一樣顯示在圖標下方，但是單擊時菜單和圖標會跳動。 我怎樣才能防止這種情況發生？ 我試過調整擺脫固定高度，但沒有改變。 我希望所有內容都保持原樣，折疊菜單僅出現在其下方。 這是我的代碼：
*, ::before, ::after { box-sizing: border-box; } :root { --blue: #3a2eb6; --white: #fff; --red: #cd3f33; } html{ font-size: 1em; } nav{ background: var(--white); } nav .logo{ background: url("../images/logo-mobile.jpg") no-repeat 0 0/contain transparent; display: block; overflow: hidden; width: 13.6875rem; height: 2.875rem; } nav ul li a{ color: var(--blue); } nav ul li{ margin: 0 0.25rem; } nav div.sign-in{ display: none; margin: 0 0.25rem; } button.navbar-toggler span i.menu-toggler{ color: var(--red); } @media screen and (min-width: 768px) { nav .logo{ width: 17.125rem; height: 3.5625rem; } nav ul li.sign-in-mobile a{ display: none; } nav div.sign-in{ background-color: var(--blue); padding: 0 1.5rem; display: block; margin-left: 15rem; } nav div.sign-in a{ color: var(--white); } #bootstrap-override .navbar-nav{ flex-direction: row; justify-content: flex-end; border-bottom: .1rem solid var(--red); } } @media screen and (min-width: 992px) { #bootstrap-override .navbar-expand-lg .navbar-toggler{ display: none; } nav .logo{ width: 24.625rem; height: 5.25rem; } #bootstrap-override .navbar-nav{ border: none; margin-left: 2rem; } nav div.sign-in{ order: 1; margin: 0 0.25rem; white-space: nowrap; } } */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="description: goes here" name="description"> <meta content="HTML, CSS, XML, JavaScript" name="keywords"> <meta content="Twisted Yogurt" name="author"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Home</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body id="bootstrap-override"> <header> <nav class="navbar navbar-expand-lg"> <div class="container justify-content-space-between"> <a class="navbar-brand" href="index.html"> <div class="logo"></div></a> <div class="sign-in"> <a class="nav-link" href="#">Sign In</a> </div><button aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler d-lg-none" data-target="#myTogglerNav" data-toggle="collapse" type="button"><span><i class="fa fa-bars menu-toggler"></i></span></button> <div class="collapse navbar-collapse" id="myTogglerNav"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Menu</a> <ul aria-labelledby="nav-link" class="dropdown-menu"> <li> <a href="#">Froyo</a> </li> <li> <a href="#">Smoothies</a> </li> <li> <a href="#">Boba</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Build</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Community Recipes</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> <li class="nav-item sign-in-mobile"> <a class="nav-link" href="#">Sign In</a> </li> </ul> </div> </div> </nav> </header> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"> </script> </body> </html>
1 個解決方案
解決方案1
0 2020-10-28 17:27:33
您的 HTML 代碼中有一些錯誤（ <div>直接位於<ul> ）。 確保代碼有效且縮進良好，以保持其可讀性和結構化。
無論如何看看文檔： https : div#myTogglerNav你必須把div#myTogglerNav放在ul.nav.navbar-nav之外/周圍，然后移動button.navbar-toggler在它上面的button.navbar-toggler 。
如何阻止我的漢堡包圖標停留在頂部欄上，使其出現在側面菜單中？
[英]How do I stop my hamburger icon from staying with top bar so it appears with the side menu?
如何阻止我的漢堡菜單在點擊時跳到頁面頂部。
[英]How to stop my Hamburger menu from jumping me to the top of my page on click.
如何使用引導程序同時 position 我的漢堡菜單及其在右側的下拉菜單？
[英]How can I position my hamburger menu and its drop down on the right side at the same time with bootstrap?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.