Bootstrap?4正解：
.ml-auto元素居右
.mr-auto元素居左

或者在包含導航欄的?<div>?加上?.justify-content-end?樣式即可

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container">
		<a class="navbar-brand" href="/">Cynhard的博客</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
			<span class="navbar-toggler-icon"></span>
		</button>
		<!-- 這個 div 加上 justify-content-end 樣式即可 -->
		<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
			<ul class="navbar-nav" id="headerNav">
				<li class="nav-item" id="navMainPage"><a class="nav-link" href="/"> 主頁 </a></li>
				<li class="nav-item" id="navTechPage"><a class="nav-link" href="/tech"> 技術 </a></li>
				<li class="nav-item" id="navFoodPage"><a class="nav-link" href="/food"> 料理 </a></li>
				<li class="nav-item" id="navPhotoPage"><a class="nav-link" href="/photo"> 攝影 </a></li>
				<li class="nav-item" id="navEssayPage"><a class="nav-link" href="/essay"> 隨筆 </a></li>
			</ul>
		</div>
	</div>
</nav>

總結

以上是生活随笔為你收集整理的Bootstrap4实现导航栏右侧对齐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。