我和ms類有問題，我正在學習如何創建導航欄，在這種情況下，元素 1 和 2應該與ms類一起使用（左對齊），元素 3 和 4應該與我類一起使用（右 -對齊），但它以居中方式作業：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav">
<a href="#" class="navbar-brand">Company Name</a>
</div>
<ul class="navbar-nav ms-auto">
<li><a class="nav-link" href="#">Element one</a></li>
<li><a class="nav-link" href="#">Element two</a></li>
</ul>
<ul class="navbar-nav me-auto">
<li><a class="nav-link" href="#">Element three</a></li>
<li><a class="nav-link" href="#">Element four</a></li>
</ul>
</nav>
作業原理：圖片
它應該如何作業：影像
uj5u.com熱心網友回復：
我強烈建議您閱讀Bootstrap 5 中的作業方式.me-auto和.ms-auto作業原理。請參閱此處有關 Auto margins 的檔案。
Bootstrap 5 使用了新的CSS 邏輯屬性和值，我也強烈建議您閱讀這些內容。
TLDR
.ms-auto(margin-inline-start: auto) ≈.ml-auto(margin-left: auto).me-auto(margin-inline-end: auto) ≈.mr-auto(margin-right: auto)
現在（希望）已經解決了，margin-left: auto在元素上設定 a （在 flex 容器中）將使元素向右對齊，而不是向左對齊。該相反的是真正的margin-right: auto。所以它沒有以錯誤的方式作業！
使用自動邊距的導航欄
這就是您使用自動邊距正確實作間隔布局的方式（您實際上在問題的第一個版本中正確地做到了）。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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 me-auto">
<li><a class="nav-link" href="#">Element one</a></li>
<li><a class="nav-link" href="#">Element two</a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li><a class="nav-link" href="#">Element three</a></li>
<li><a class="nav-link" href="#">Element four</a></li>
</ul>
</div>
</div>
</nav>導航欄使用 justify-content
也可以通過添加.justify-content-lg-between到父.collapse類來達到同樣的效果。這基本上設定justify-content: space-between在移動設備 ( lg) 斷點上方的螢屏尺寸上。我覺得這是實作預期布局的更好方法，但最好同時了解兩者。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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 justify-content-lg-between"
id="navbarNav"
>
<ul class="navbar-nav">
<li><a class="nav-link" href="#">Element one</a></li>
<li><a class="nav-link" href="#">Element two</a></li>
</ul>
<ul class="navbar-nav">
<li><a class="nav-link" href="#">Element three</a></li>
<li><a class="nav-link" href="#">Element four</a></li>
</ul>
</div>
</div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348820.html
標籤：html bootstrap-5
上一篇：為什么我的導航切換按鈕沒有功能？