Html 如何将引导4导航栏链接彼此相邻并向右浮动？

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

---

您链接的文档声明使用

元素或

元素

类在整个过程中使用，因此您的标记可以非常灵活。使用

s如上所述，或者使用一个元素滚动您自己的。因为 .nav使用display:flex，导航链接的行为与nav相同 项目可以，但没有额外的标记

---

菜单项堆叠是由于

.navbar expand lg

类引起的。xs/sm/md视口将堆叠菜单项，因为在使用折叠菜单视图（汉堡菜单）后应堆叠渲染。您可以看到我将其更改为

。navbar expand sm

，希望在运行代码段时更好地说明这一点（取决于浏览器的宽度）
另外，将

.alify content between

添加到
元素以右对齐导航或您可以将

.ml auto

添加到

中。导航栏导航
或甚至使用
.w-100
与
一起使用。alify content end
以强制导航为全宽

您可能希望将
.navbar nav
元素包装为：
，并包括一个navbar切换按钮，类似于它们的文档：



您的设置一点也不好。请看一下引导文档。要使导航向右对齐，请在导航的ul元素中使用“ml auto”引导类。Bootstrap 4完全是关于flexbox布局的，因此您必须非常精确地使用HTML标记。
这样生成的导航栏不会向右浮动或具有所需的颜色。您的JSFIDLE无效。它的行是
而不是
，尽管我可能更喜欢使用
，根据Boostrap文档，您也可以使用结构：“因为我们为导航使用类，如果您愿意，您可以完全避免基于列表的方法。”
<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>