我正在使用 Bootstrap 4 作為我現在正在做的 Laravel 8 博客系統的一部分。選單項已就位，但我想將最后一個選單項向右移動。我嘗試了很多選項，包括ml-auto但它對專案沒有任何影響。我也嘗試從以前的類似帖子中受益，但事實證明它們都不適用于我的案例。我非常感謝在這方面的任何幫助。請在下面找到我的代碼：
<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>```
uj5u.com熱心網友回復：
第一個問題是您說您使用的是 Bootstrap 4，但您的語法是 Bootstrap 5。data-bs-*屬性適用于 B5，B4 只有data-*屬性。
然后為了將最后一項向右對齊，首先您需要navbar-nav使用所有寬度，從而添加w-100到它。然后您將需要最后一項來填充所有剩余空間，您可以通過添加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>
JSFiddle
同樣，如果您確實使用的不是 B5，而是 B4，則將所有data-bs-*屬性更改為 only data-*，并且也text-end變為text-right。
uj5u.com熱心網友回復：
您可以通過添加此 css 行來做到這一點：
.nav-link:last-child {
right: 0;
position: absolute;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/391865.html
標籤：html css 推特引导 bootstrap-4 html 列表