简单做的bootstrap4的垂直导航，还可以折叠

最近在研究bootstrap4相关规则，一只想做一个垂直导航，在不破坏其基本功能的情况下依旧实现折叠功能，发现的确没有修改多少，一样的完美实现，记录备注下。

导航html代码：

<nav class="navbar navbar-expand-sm bg-info navbar-dark col-sm-2 col-lg-1 col-12">
  <a class="navbar-brand" href="#">安卡屋</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

然后修改了一些CSS就实现了：

@media(min-width:576px){
	.navbar{position:fixed;;display:block;text-align:right;top:0;bottom:0;}
	.navbar-nav{display:block}
	.navbar-brand{margin-right:0.5em}
	.navbar-expand-sm .navbar-collapse{justify-content:flex-end}
}

基本理念就是把原本横向排列的东西垂直排列就可以了，然后占满空间即可。