我正在使用以下導航欄。li當導航欄折疊時，我需要能夠將選單項居中。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
</ul>
</div>
</nav>我想出的解決方案是執行以下操作：
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<div class="d-flex flex-row justify-content-center">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
</div>
<div class="d-flex flex-row justify-content-center">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
</div>
</ul>
但正如評論中所述，這不是有效的 HTML - 將 div 作為串列元素的子元素
它確實有效。但無效 - 那么我怎樣才能正確地將它們居中呢？
uj5u.com熱心網友回復：
這可能只是為較小的斷點選擇性地應用文本對齊的問題。
注意：d-block添加到折疊元素僅用于此處演示。查看替代布局的完整頁面演示。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
<div class="collapse navbar-collapse d-block">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0 text-center">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
</ul>
</div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534526.html