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 viewports 将堆叠菜单项，因为一旦使用折叠菜单 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>