在 Bootstrap 5 檔案中，它說使用“??justify-content-center”類來水平對齊導航元素。
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
參考：https ://getbootstrap.com/docs/5.0/components/navs-tabs/#horizo??ntal-alignment
如何水平對齊導航欄？將“justify-content-center”添加到 navbar-nav 不起作用。有沒有一種優雅的方法可以使用 BootStrap 的內部類而不是撰寫自定義 CSS 來實作這一點？
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
uj5u.com熱心網友回復：
嘗試這個：
在折疊 div 中添加justify-content-center類，如下所示
<div id="navbarNav">
更新： justify-content-center 會將內容對齊為中心，<ul>但您需要<ul>在此 div 中居中。collapse navbar-collapse<ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442465.html
下一篇：隱藏選擇上的空行