Bootstrap 5 navbar-nav 在折疊時填滿整個屏幕
[英]Bootstrap 5 navbar-nav to fill whole screen when collapsed
問題描述
嘿朋友怎么了…………！
我正在使用 bootstrap 5 構建這個網站，我確實有一個導航欄切換器......它工作正常但我確實希望它在切換時填充整個屏幕寬度...... ..！
嘗試了一些東西但做不到。 這是我的代碼。 感謝您的幫助................................!
/***** Top menu *****/.navbar { background: #000; transition: all.6s; backface-visibility: hidden; height: 88px; }.navbar.navbar-no-bg { background: rgba(0, 0, 0); }.navbar-dark.navbar-nav { font-size: 15px; color: #fff; font-weight: 600; }.navbar-dark.navbar-nav.nav-link { color: #fff; color: rgba(255, 255, 255, 1); border: 0; }.navbar-dark.navbar-nav.nav-link:hover { color: #fff; }.navbar-dark.navbar-nav.nav-link:focus { color: #fff; outline: 0; }.navbar-brand { width: 136px; background: url(/assets/imgs/logo_jpad.png) left center no-repeat; border: 0; margin-left: 60px; text-indent: -99999px; background-size: contain; background-repeat: no-repeat; background-position: center; }.navbar-nav { background: rgba(0, 0, 0); padding-top: 24px; margin-right: 70px; padding-bottom: 24px; left: 0; right: 0; text-align: center; }
<,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:0"> <title>Document</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark"> <div class="container"> <a class="navbar-brand" href="index:html">Bootstrap 5 One Page Website Tutorial</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link scroll-link" href="#top-content">About Us</a> </li> <li class="nav-item"> <a class="nav-link scroll-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link scroll-link" href="#about-us">Contact</a> </li> <li class="nav-item"> <a class="nav-link scroll-link" href="#portfolio">FAQ</a> </li> <li class="nav-item"> <button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button> </li> </ul> </div> </div> </nav> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
1 2023-01-10 21:14:43
您需要刪除容器 class 或將其向上移動（例如），以便它封裝您的所有導航。 不知道這是從哪里來的，但似乎是一種設計選擇，可以讓塌陷更小。 但這將解決它。
/***** Top menu *****/.navbar { background: #000; transition: all.6s; backface-visibility: hidden; height: 88px; }.navbar.navbar-no-bg { background: rgba(0, 0, 0); }.navbar-dark.navbar-nav { font-size: 15px; color: #fff; font-weight: 600; margin: 0 auto; }.navbar-dark.navbar-nav.nav-link { color: #fff; color: rgba(255, 255, 255, 1); border: 0; }.navbar-dark.navbar-nav.nav-link:hover { color: #fff; }.navbar-dark.navbar-nav.nav-link:focus { color: #fff; outline: 0; }.navbar-brand { width: 136px; background: url(/assets/imgs/logo_jpad.png) left center no-repeat; border: 0; margin-left: 60px; text-indent: -99999px; background-size: contain; background-repeat: no-repeat; background-position: center; }.navbar-nav { background: rgba(0, 0, 0); padding-top: 24px; margin-right: 70px; padding-bottom: 24px; left: 0; right: 0; text-align: center; }
<,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:0"> <title>Document</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <div class="container"> <nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark"> <a class="navbar-brand" href="index:html">Bootstrap 5 One Page Website Tutorial</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link scroll-link" href="#top-content">About Us</a> </li> <li class="nav-item"> <a class="nav-link scroll-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link scroll-link" href="#about-us">Contact</a> </li> <li class="nav-item"> <a class="nav-link scroll-link" href="#portfolio">FAQ</a> </li> <li class="nav-item"> <button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button> </li> </ul> </div> </nav> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>
Bootstrap NAV在手機中折疊或展開時為顏色設置樣式的方式
[英]Bootstrap NAV way to style color when is collapsed or expanded in mobile
React-bootstrap：帶有帶有“fill”標志的“Nav”的“NavBar”無法正常工作
[英]React-bootstrap: `NavBar` that has `Nav` with `fill` flag is not working correctly
JavaScript-Bootstrap 4-僅在折疊時隱藏導航欄
[英]JavaScript - Bootstrap 4 - hide navbar only when it's collapsed
Bootstrap 3-自定義折疊時導航欄相對於品牌/徽標的位置
[英]Bootstrap 3 - Customizing the position of navbar relative to brand/logo when collapsed
在小屏幕上垂直放置時，如何在折疊狀態下加載NavBar
[英]How to load a NavBar in the collapsed state when it goes vertical on a small screen
顯示時在父容器外部折疊導航欄推送元素（引導程序 5）
[英]Collapsed navbar push elements outside of parent container when shown (Bootstrap 5)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.