Bootstrap 版本： bootstrap-4.0.0-beta.2

通过Bootstrap4 的 Flex 布局可以很容易地将导航栏右侧对齐，只需要在包含导航栏的 <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>

查看运行结果