Question

我试图将“不和谐登录”文本和图像向右浮动，而其他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/

Answer 1

只需在css下更新，就可以了，因为您需要使最后一个子位置与绝对头位置相对，如果要进一步右移，请删除max-width或将其设置为“ .cover-container”。

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

Answer 2

你想这样吗？

代码在这里

在Bootstrap4上浮动一个导航栏项目，并保持居中链接

2 个答案: