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>