如何将 bootstrap 4 中的单个菜单项向右移动
How to shift a single menu item in bootstrap 4 to the right
我正在使用 Bootstrap 4 作为我现在正在做的 Laravel 8 博客系统的一部分。菜单项就位,但我想将最后一个菜单项移到右边。我尝试了很多选项,包括 ml-auto
但它对项目没有任何影响。我也尝试从以前的类似帖子中受益,但事实证明它们都不适用于我的情况。我将非常感谢在这方面的任何帮助。请在下面找到我的代码:
<nav class="navbar navbar-expand-lg navbar-light navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">{{config('app.name', 'Learning')}}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="nav navbar-nav">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/about">About Us</a>
<a class="nav-link" href="/services">Services</a>
<a class="nav-link" href="/posts">Blog</a>
<a class="nav-link" href="/posts/create">Create Post</a>
</div>
</div>
</div>
</nav>
您可以通过添加此 css 行来做到这一点:
.nav-link:last-child {
right: 0;
position: absolute;
}
第一个问题是你说你用的是Bootstrap4,但是你的语法是Bootstrap5。data-bs-*
属性是给B5的,B4只有data-*
属性。
然后为了将最后一项右对齐,首先您需要 navbar-nav
占据所有宽度,因此向其添加 w-100
。然后你需要最后一项来填充所有剩余的 space,你可以通过添加 flex-fill
来完成。然后您需要做的就是将 text-end
添加到同一元素。您的代码变为:
<div class="nav navbar-nav w-100">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/about">About Us</a>
<a class="nav-link" href="/services">Services</a>
<a class="nav-link" href="/posts">Blog</a>
<a class="nav-link flex-fill text-end" href="/posts/create">Create Post</a>
</div>
再说一遍,如果你确实用的不是B5,而是B4,那就把所有的data-bs-*
属性改成只用data-*
,text-end
也变成text-right
。
我正在使用 Bootstrap 4 作为我现在正在做的 Laravel 8 博客系统的一部分。菜单项就位,但我想将最后一个菜单项移到右边。我尝试了很多选项,包括 ml-auto
但它对项目没有任何影响。我也尝试从以前的类似帖子中受益,但事实证明它们都不适用于我的情况。我将非常感谢在这方面的任何帮助。请在下面找到我的代码:
<nav class="navbar navbar-expand-lg navbar-light navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">{{config('app.name', 'Learning')}}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="nav navbar-nav">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/about">About Us</a>
<a class="nav-link" href="/services">Services</a>
<a class="nav-link" href="/posts">Blog</a>
<a class="nav-link" href="/posts/create">Create Post</a>
</div>
</div>
</div>
</nav>
您可以通过添加此 css 行来做到这一点:
.nav-link:last-child {
right: 0;
position: absolute;
}
第一个问题是你说你用的是Bootstrap4,但是你的语法是Bootstrap5。data-bs-*
属性是给B5的,B4只有data-*
属性。
然后为了将最后一项右对齐,首先您需要 navbar-nav
占据所有宽度,因此向其添加 w-100
。然后你需要最后一项来填充所有剩余的 space,你可以通过添加 flex-fill
来完成。然后您需要做的就是将 text-end
添加到同一元素。您的代码变为:
<div class="nav navbar-nav w-100">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/about">About Us</a>
<a class="nav-link" href="/services">Services</a>
<a class="nav-link" href="/posts">Blog</a>
<a class="nav-link flex-fill text-end" href="/posts/create">Create Post</a>
</div>
再说一遍,如果你确实用的不是B5,而是B4,那就把所有的data-bs-*
属性改成只用data-*
,text-end
也变成text-right
。