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

显示：内联阻止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 answer可以解决您的问题。

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

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

这里唯一重要的是第一个mr-auto中的ul。您将对on this page有更多的说明，以了解其工作原理。

Answer 3

在ul元素上，将类更改为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

Bootstrap导航栏图标未正确对齐

3 个答案: