如何將導航欄品牌和導航欄與 bootstrap 5 對齊？

Question

我正在使用引導程序創建網頁。 我在頁面頂部有一個 nabber，我希望我的導航欄品牌放在右側，我的 nabber 鏈接放在右側。 當我這樣做時，它似乎將導航欄鏈接向下推，並且意味着導航欄和導航欄品牌而不是內聯（如下所示）

這是我的 html

 <nav class="navbar navbar-expand-lg navbar-dark" id="mainNav"> <div class="container"> <a class="navbar-brand" href="#page-top">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNav"> <ul class="navbar-nav mr-auto" id="myNavbar"> <li class="nav-item"><a class="nav-link" href="#">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Skills</a></li> <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> </nav>

這是我的 css

 .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }.navbar-nav.nav-link { padding-right: 0; padding-left: 0; }.nav-item { margin-bottom: -1px; } nav #myNavbar li a { float: right;important. }:navbar-inverse { border; none: margin; 0: background; transparent: padding-left; 20px: padding-bottom; 20px. }:navbar-brand { font-weight; 700: padding-top. 0;3125rem: padding-bottom. 0;3125rem: margin-right; 1rem: line-height; inherit: white-space; nowrap: display; inline-block. } #mainNav.navbar-nav.nav-item:nav-link { font-weight; 700: font-size. 0;9rem: display; inline-block; }

我該如何解決？

Answer 1

您忽略了打開導航標簽嘗試使用此代碼： <nav class="navbar navbar-expand-lg navbar-light bg-light">希望這會奏效。

Answer 2

嘗試正確添加包裝器<nav class="navbar"></nav> 。 所以你的代碼將是這樣的：

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-light"> <div class="container"> <a class="navbar-brand" href="#page-top">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNav"> <ul class="navbar-nav mr-auto" id="myNavbar"> <li class="nav-item"><a class="nav-link" href="#">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Skills</a></li> <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> </nav>

Answer 3

在 head 標簽內包含這個：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

在關閉 body 標簽之前粘貼：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Answer 4

像這樣使用..

 var superfish = $('#st-navbar-desktop-menu-nav').superfish({ //add options here if required });

 /* Navbar desktop -------------------------------------------------- */.st-navbar-desktop-wrapper { font-family: inherit; font-size: 16px; font-weight: 400; position: absolute; width: 100%; padding: 0; margin-top: 0; margin-bottom: 0; border-radius: 0; z-index: 1030; }.st-navbar-desktop-fixed { position: fixed; top: 0; }.st-navbar-desktop { position: relative; height: 80px; z-index: auto; }.st-navbar-desktop:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* Navbar desktop logo -------------------------------------------------- */.st-navbar-desktop-logo { float: left; margin: 26px 0 0; }.st-navbar-desktop-logo-link > img { width: 112px; height: 28px; } /* Navbar desktop menu -------------------------------------------------- */.st-navbar-desktop-menu { float: right; } /* Navbar desktop menu superfish settings -------------------------------------------------- */.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }.sf-menu li { position: relative; }.sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; }.sf-menu > li { float: left; }.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }.sf-menu a { display: block; position: relative; }.sf-menu ul ul { top: 0; left: 100%; } /* Navbar desktop menu superfish custom -------------------------------------------------- */.sf-menu { float: left; }.sf-menu ul { min-width: 180px; }.sf-menu a { padding: 28px 12px 29px 12px; text-decoration: none; zoom: 1; }.sf-menu li { white-space: nowrap; *white-space: normal; -webkit-transition: background.2s; transition: background.2s; }.sf-menu ul a { padding: 11px 12px 12px 12px; font-size: 13px; }.sf-menu li:hover, .sf-menu li.sfHover { -webkit-transition: none; transition: none; } /*** Align right ***/.sf-menu li.dropdown-right ul { left: auto; right: 0; min-width: 150px; }.sf-menu li.dropdown-right a { text-align: right; zoom: 1; }.sf-menu li.dropdown-right ul ul { right: 100%; } /* Navbar desktop menu superfish arrows -------------------------------------------------- */ /*** Separacion chevron del texto en primer level ***/.sf-arrows.sf-with-ul { padding-right: 28px; } /*** Separacion chevron del texto en segundo level ***/.sf-arrows ul.sf-with-ul { padding-right: 38px; } /*** Separacion chevron del texto en segundo level dropdown right ***/.sf-arrows li.dropdown-right ul.sf-with-ul { padding-right: 12px; padding-left: 38px; } /*** Generated arrows ***/.sf-arrows.sf-with-ul:after { content: '\f0d7'; font-family: 'FontAwesome'; position: absolute; margin-top: 1px; margin-left: 5px; height: 0; width: 0; }.sf-arrows > li >.sf-with-ul:focus:after, .sf-arrows > li:hover >.sf-with-ul:after, .sf-arrows >.sfHover >.sf-with-ul:after { content: '\f0d8'; } /*** Generated second arrows ***/.sf-arrows ul.sf-with-ul:after { content: '\f0da'; margin-left: 5px; right: 20px; }.sf-arrows ul li >.sf-with-ul:focus:after, .sf-arrows ul li:hover >.sf-with-ul:after, .sf-arrows ul.sfHover >.sf-with-ul:after { content: '\f0d7'; right: 23px; } /*** Generated second right arrows ***/.sf-arrows li.dropdown-right ul.sf-with-ul:after { float: left; content: '\f0d9'; margin-right: 30px; left: 10px; }.sf-arrows li.dropdown-right ul li >.sf-with-ul:focus:after, .sf-arrows li.dropdown-right ul li:hover >.sf-with-ul:after, .sf-arrows li.dropdown-right ul.sfHover >.sf-with-ul:after { content: '\f0d7'; left: 10px; } /* Navbar desktop menu superfish last item -------------------------------------------------- */.sf-menu > li.no-padding-right > a { padding-right: 0px; } /* Navbar desktop all styles -------------------------------------------------- */ /*** Navbar desktop ***/.st-navbar-desktop:before { background-color: rgba(33,33,33,0.8); } /*** First level a ***/.sf-menu a { color: #ffffff; }.sf-menu a:hover, .sf-menu a:focus { color: #aaaaaa; } /*** Second level a ***/.sf-menu ul a { color: #cccccc; }.sf-menu ul a:hover, .sf-menu ul a:focus { color: #aaaaaa;important. } /*** Third level a ***/:sf-menu ul ul a { color; #cccccc. }:sf-menu ul ul a,hover. :sf-menu ul ul a:focus { color; #aaaaaa.important: } /*** First level li ***/;sf-menu > li { /*background. #BDD2FF:*/ }:sf-menu > li;hover > a { /*color. #676767:*/ } /*** Second level li ***/;sf-menu ul li { background. #333333: },sf-menu ul li.hover. :sf-menu ul li;sfHover { background. #3e3e3e: } /*** Third level li ***/;sf-menu ul ul li { background. #333333: },sf-menu ul ul li.hover. :sf-menu ul ul li;sfHover { background. #3e3e3e: } /*** Levels li border top ***/;sf-menu ul li { border-top. 1px solid #494949: };sf-menu ul ul li { border-top. 1px solid #494949: }:sf-menu ul li;first-child { border-top. 0: } /* Navbar desktop mas ajustes -------------------------------------------------- */:sf-menu > li;last-child > a { padding-right: 0; }

 <div id="st-navbar-desktop-wrapper" class="st-navbar-desktop-wrapper st-navbar-desktop-fixed"> <div class="st-navbar-desktop"> <div class="container"> <div class="st-navbar-desktop-logo"> <a class="st-navbar-desktop-logo-link" style="text-decoration:none" title="Logo" href="index.html"><b>Navbar</b></a> </div> <nav class="st-navbar-desktop-menu" role="navigation"> <ul id="st-navbar-desktop-menu-nav" class="sf-menu"> <li><a href="#">About</a></li> <li><a href="#">Skills</a> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </div> </div>