Bootstrap 導航欄圖標未正確對齊

Question

我試圖在右上角添加三個圖標，搜索、通知鈴和用戶。 我不想崩潰，因為這是一個 Electron 桌面應用程序，導航欄需要修復。

<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 比較陌生。

Answer 1

將 display: inline-block 賦予 ul 和 li 標簽。

 ul.navbar-nav, li.nav-item{ display: inline-block; }

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

Answer 2

有一個Stack Overflow 答案可以解決您的問題。

從此答案中提取代碼，您將能夠正確自定義導航欄：

<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 。 您將 在此頁面上獲得更多解釋以了解其工作原理。

Answer 3

在ul元素navbar-nav類更改為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>

這是一個有效的代碼和盒子https://codesandbox.io/s/weathered-wildflower-86fv8