如何显示 Bootstrap 4 导航栏链接彼此相邻并浮动到右侧?

Question

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

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

我尝试使用.justify-content-end跟随 https://getbootstrap.com/docs/4.0/components/navs/将它们右对齐，但到目前为止，它看起来不像我想要的那样。(我也看过 Bootstrap 4 源代码，但无法快速确定问题所在(。

更新

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

<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类而发生的。 XS/SM/MD 视口将堆叠菜单项，因为一旦使用了折叠的菜单视图(汉堡菜单(，渲染就会堆叠。您可以看到我将其更改为.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>

Answer 2

您链接的文档声明使用<ul>元素或<nav>元素。

自始至终都使用类，因此您的标记可以非常灵活。用

就像上面一样，或者用
元素滚动你自己的。因为 .nav使用display：flex，导航链接的行为与nav相同 项目会，但没有额外的标记。

<nav class="nav">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>

Answer 3

你的设置一点也不好。在此处查看引导文档。要将您的导航与右对齐，请在导航的ul元素中使用"ml-auto">引导类。Bootstrap 4 是关于 flexbox 布局的，所以你必须非常精确地使用 HTML 标记。