在Bootstrap4上浮动一个导航栏项目，并保持居中链接 [英] Float one navbar item right Bootstrap4 and keep centered links
问题描述
我正在尝试将不和谐登录"文本和图像向右浮动，而其他2个导航栏链接仍位于中间.每当我尝试将其右移时，居中的内容/导航项就会被推到左侧的不和谐登录"按钮的宽度左右.我试图在不移动中心内容的情况下将其浮动.这是我的代码.
I'm trying to float the "login with discord" text and image to the right while the other 2 navbar links stay in the center. Whenever I tried to float it right the centered content/nav items got pushed over to the left about the width of the "login with discord" button. I'm trying to float it right without the center content moving. Here's my code.
<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/
推荐答案
只需在css下更新，就可以完成，因为您需要使最后一个子位置与标头位置相对，如果您想进一步正确，则删除max -width或将其设置为".cover-container".
just update below css and you're done, as you need to make that last child position absolute and header position relative, if you want further right then remove max-width or set it unset for ".cover-container".
a.nav-link:last-child {
position: absolute;
right: 0;
}
.masthead {
position: relative;
width: 100%;
}
这篇关于在Bootstrap4上浮动一个导航栏项目，并保持居中链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
