如何将导航栏品牌和导航栏与引导程序 5 对齐？答案

【问题标题】：How to align a navbar-brand and navbar with bootstrap 5?如何将导航栏品牌和导航栏与引导程序 5 对齐？
【发布时间】：2021-05-08 20:00:26
【问题描述】：

我正在使用引导程序创建网页。我在页面顶部有一个 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; }

我该如何解决这个问题？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

这样使用..

    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>

【讨论】：

【解决方案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>

【讨论】：

我有导航，只是忘记从我的代码中复制它
因为您可以在 sn-p 中运行上述代码，所以它工作正常。
@becky 你能分享你的网站链接吗？你在哪个网站上遇到了这个问题？

【解决方案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">

在结束正文标签之前粘贴：

<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>

【讨论】：

但相同的代码在我的系统中运行尝试再次创建新文件
这有点奇怪

【解决方案4】：

你忽略了打开导航标签尝试使用这个代码：<nav class="navbar navbar-expand-lg navbar-light bg-light">希望这会工作。

【讨论】：

我有导航，只是忘记从我的代码中复制它