将一个导航栏项目向右浮动 Bootstrap4 并保持居中链接答案

【问题标题】：Float one navbar item right Bootstrap4 and keep centered links将一个导航栏项目向右浮动 Bootstrap4 并保持居中链接
【发布时间】：2019-05-26 00:56:04
【问题描述】：

我正在尝试将“不和谐登录”文本和图像浮动到右侧，而其他 2 个导航栏链接保持在中心。每当我尝试将其向右浮动时，居中的内容/导航项目都会被推到左侧，大约是“使用不和谐登录”按钮的宽度。我正在尝试在不移动中心内容的情况下使其正确浮动。这是我的代码。

<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto mr-auto ml-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="features.html">Features</a>
        <a class="nav-link" href="#"><img src="../img/discordnav.png"></img> Login With Discord</a>
      </nav>

    </div>

  </header>

网站/预览链接 - https://wojakbot-64140.firebaseapp.com/

【问题讨论】：

你想把它放在你的页眉或整个页面的右端吗？
就在右上角，与其他导航项目分开，同时与它们在同一行。
你能清理 HTML 并发布所有相关的导航栏代码吗？预览链接不同。

标签： html css bootstrap-4 css-float navbar

【解决方案1】：

只需在 css 下方更新即可完成，因为您需要将最后一个子位置设为绝对位置，将标题位置设为相对位置，如果您想更进一步，请移除 max-width 或将其设置为“.cover-container”未设置。

a.nav-link:last-child {
    position: absolute;
    right: 0;
}
.masthead {
    position: relative;
    width: 100%;
}

【讨论】：

如果这对你不起作用，请发表评论，我也在你的现场测试过......
我添加了那个 CSS，似乎没有任何动静。我在导入到 index.html 的任何 CSS 文件中都找不到 a.nav-link:last-child {。所以我不确定你是否只是想添加代码而不是编辑。
如果您还没有为这些添加任何 css，则添加上面的 css，它将起作用。

【解决方案2】：

你想变成这样吗？

代码在这里

【讨论】：

我添加了代码，它似乎只移动了一点点。 i.imgur.com/4C9gg9s.png
它似乎卡在了这个容器中，但我不知道如何调整它。 i.imgur.com/T0d8dmv.png
是的，完全一样。
谢谢！工作完美。调整页面大小时，有没有办法阻止它显示在其他菜单项上？
为什么你不使用响应式导航栏？ w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav.