我正在嘗試將導航欄組件向右對齊。代碼如下。我試過了，
ml-auto但沒有給出想要的結果。我得到的結果附在下面。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<header class="bg-info">
<div class="row text-white">
<div class="col-md-6 col-9 p-3 pl-5">
<h2>Header</h2>
</div>
<div class="col-md-6 col-3 my-auto ml-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler ml-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- me-auto mb-2 mb-lg-0 -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#">Home</a
>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Know More</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Actions</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>結果
我希望主頁、了解更多等內容右對齊。我最初將其分為兩列。然后給第二個ml-auto上課。這里有什么問題？
uj5u.com熱心網友回復：
我檢查了 safari、chrome、firefox 和 StackOverflow 中的代碼段檢查器。
所有都顯示了正確的樣式，而不是您截取的樣式。也許你有一個注入某種自定義 CSS 的擴展？或者你沒有正確加載引導檔案？
您的字體在螢屏截圖中似乎也有點偏離。
我的 Chrome 的樣子：
uj5u.com熱心網友回復：
可以很容易。洗掉所有ml-auto的然后使用d-flex到justify-content-end（右）。justify-content-start將是左邊。但是......正如其他人指出的那樣。當我嘗試您的代碼時 - 您的選單在右側，標題在左側。
<nav class="navbar navbar-expand-lg navbar-light d-flex justify-content-end">
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/370640.html
標籤：css 推特引导 bootstrap-4 前端 导航栏
上一篇：覆寫Bootstrap5顏色