Nav栏徽标与文本之间的不对齐

Question

我正在尝试创建顶部的导航条，它作为一个卷轴粘在一起，但在使用引导程序时遇到困难。我的徽标和其他文本不对齐。

使用引导的HTML：

  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-light justify-content-end style="background-color: #e7a412;">
      <div class="container-fluid">
         <!-- Mos logo -->
         <div><a class="navbar-brand ms-lg-3" href="#">
            <img src="images/mos_logo.png" alt=""></div>
        
        <button 
        class="navbar-toggler" 
        type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#navbarText" 
        aria-controls="navbarText" 
        aria-expanded="false" 
        aria-label="Toggle navigation">

         <!--<span class="navbar-toggler-icon"></span>-->
     <i class="fas fa-bars"></i>
    </button>

        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Mos Outlets</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Mos</a>
            </li>
          </ul>
          <span class="navbar-text">
          </span>
        </div>
      </div>
    </nav>

但我的文本与徽标：在这里输入图像描述不对齐

Answer 1

代码<a class="navbar-brand ms-lg-3" href="#"></a>在<li>标签下占用其空间，因此徽标和其他文本不对齐。我猜你复制的不对吧？

另外，我发现代码中缺少语法和结束标记。请以下面的代码作为参考。

1. 为<nav>的类少了一个<nav>。
2. 缺少标志div的关闭</a>。
3. 一个额外的结束标签</button>。

<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end" style="background-color: #e7a412">
  <div class="container-fluid">
    <!-- Mos logo -->
    <div>
      <a class="navbar-brand ms-lg-3" href="#"> <img src="images/mos_logo.png" alt="" /></a>
    </div>

    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarText"
      aria-controls="navbarText"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <!--<span class="navbar-toggler-icon"></span>-->
      <i class="fas fa-bars"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Mos Outlets</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Mos</a>
        </li>
      </ul>
      <span class="navbar-text"> </span>
    </div>
  </div>
</nav>