Html 引导导航栏图标未正确对齐

我试图在右角添加三个图标，搜索、通知和用户。我不想崩溃，因为这是一个电子桌面应用程序和导航栏需要修复

<nav class="navbar navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
            </a></li>
          </ul>
        </nav>

---

这样，图标会一个接一个地垂直显示，从而使导航栏变宽。我如何纠正这个问题？我对Bootstrap比较陌生。

显示：ul和li标签的内联块

ul.navbar-nav，li.nav-item{
显示：内联块；
}

有一个解决您的问题的方法

从该答案中提取代码，您将能够正确自定义导航栏：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="navbar-brand" href="#">Navbar</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
              </a></li>
        </ul>
</nav>

这里唯一重要的是第一个

ul

中的

mr auto

。

---

您将有更多的解释来理解它是如何工作的。

在

ul

元素上，将类更改为just

nav

，而不是

navbar nav

&添加类

d-flex

    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav d-flex">
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/search.svg" alt="" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/person.svg" alt="" />
          </a>
        </li>
      </ul>
    </nav>

---

这是一个代码沙盒，它正在工作

这能回答你的问题吗？