我正在使用引导程序创建网页。我在页面顶部有一个 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; }
我该如何解决这个问题?
答案 0 :(得分:0)
您省略了打开导航标签尝试使用以下代码:<nav class="navbar navbar-expand-lg navbar-light bg-light">
希望这会奏效。
答案 1 :(得分:0)
尝试正确添加包装器 <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>
答案 2 :(得分:0)
在 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>
答案 3 :(得分:0)
这样使用..
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>