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>