如何将元素放置在导航栏中？

Question

我的导航栏的元素似乎被卡在了它之外。不知道为什么？

这是我的代码：

<nav class="navbar navbar-expand-lg navbar-inverse"></nav>
    <div class="container-fluid">
      <div class="navbar-header">
        <a
          style="color: black; text-decoration: none; font-size: 2rem;"
          class="navbar-brand"
          href="#"
          >name<span class="fas fa-microscope fa-1x"></span
        ></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="material-icons">menu</i>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item"><a href="#">Protect</a></li>
          <li class="nav-item"><a href="#">About</a></li>
        </ul>
    </div>
  </nav>

.nav a{
  color: white !important;
  font-size: 20px;
}
.navbar-brand{
  color: white !important;
  font-size: 20px;
  font-family: sans-serif;
}

这是导航栏的样子：

website

有谁知道如何解决这个问题？ （菜单图标是不是背景是白色的，是黑色的，而显微镜图标是不可见的，是白色的？）

谢谢！

Answer 1

您在开始时关闭了导航栏，因此请从第一行中删除 </nav> 标记。 删除第 2 行，这里是不必要的代码。 为“保护”和“关于菜单”分配类“导航链接”。

<nav class="navbar navbar-expand-lg navbar-inverse">
    <div class="navbar-header">
        <a
          style="color: black; text-decoration: none; font-size: 2rem;"
          class="navbar-brand"
          href="#">name<span class="fas fa-microscope fa-1x"></span></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="material-icons">menu</i>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
          <li class="nav-item"><a class="nav-link"  href="#">About</a></li>
        </ul>
    </div>
</nav>