html - 如何显示 Bootstrap 4 导航栏链接并排并向右浮动？

Question

我正在尝试创建一个导航栏，其中品牌 Logo 位于左侧，但导航栏链接位于右侧。目前，导航栏链接位于右侧，但显示在彼此之上，而不是彼此相邻:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Peek Solutions</a>
  <div class="navbar-nav justify-content-end">
    <a class="nav-item nav-link" href="#">About</a>
    <a class="nav-item nav-link" href="#">Services</a>
    <a class="nav-item nav-link" href="#">Contact</a>
  </div>
</nav>

我尝试使用 https://getbootstrap.com/docs/4.0/components/navs/ 之后的 .justify-content-end 将它们右对齐。 ，但到目前为止，它看起来还不是我想要的样子。 (我还查看了 Bootstrap 4 source code 但无法快速确定问题所在)。

更新

如果我使用以下代码片段，

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Peek Solutions</a>
  <div class="navbar justify-content-end">
    <a class="nav-item nav-link" href="#">About</a>
    <a class="nav-item nav-link" href="#">Services</a>
    <a class="nav-item nav-link" href="#">Contact</a>
  </div>
</nav>

然后定位是根据需要的(参见 https://jsfiddle.net/qxdsam8t/10/ )，但链接的颜色恢复为其默认颜色蓝色，而不是浅灰色主题颜色。如果我将类 navbar-nav 添加到内部 div，那么颜色会返回到主题颜色，但显示会像我开始时一样“堆叠”。看起来这些属性是“耦合的”；我怎样才能获得颜色而不是“堆叠”？

Answer 1

菜单项堆叠的原因是 .navbar-expand-lg类(class)。 xs/sm/md 视口(viewport)将堆叠菜单项，因为一旦使用折叠菜单 View (汉堡菜单)，渲染就应该堆叠。你可以看到我把它改成了.navbar-expand-sm希望在运行代码片段时更好地说明这一点(取决于您的浏览器的宽度)。

此外，添加.justify-content-between到<nav>元素右对齐导航或，您可以添加 .ml-auto到.navbar-nav <div> 或甚至使用.w-100以及.justify-content-end强制导航为全宽。

您可能想要包装 .navbar-nav元素为:<div class="collapse navbar-collapse"></div>并包括一个导航栏切换按钮，类似于他们的文档:https://getbootstrap.com/docs/4.0/components/navbar/#toggler

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark justify-content-between">
  <a class="navbar-brand" href="#">Peek Solutions</a>
  <div class="navbar-nav justify-content-end">
    <a class="nav-item nav-link" href="#">About</a>
    <a class="nav-item nav-link" href="#">Services</a>
    <a class="nav-item nav-link" href="#">Contact</a>
  </div>
</nav>