在vue中使用bootstrap3寫(xiě)了個(gè)響應(yīng)式導(dǎo)航，navbar-toggle點(diǎn)擊顯示之后，點(diǎn)擊列表中的路由跳轉(zhuǎn)了，但是列表不關(guān)閉，這樣我只能通過(guò)js來(lái)控制關(guān)閉，但是在vue中應(yīng)該怎么寫(xiě)？

    <nav class="nav navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!--此處應(yīng)該是個(gè)模板放logo-->
    <div class="navbar-header">
      <a href="javascript:void(0);" class="navbar-brand logo-wrapper">
        <logo></logo>
      </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">切換導(dǎo)航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="item"><router-link to="/home">首頁(yè)</router-link></li>
          <li class="item"><router-link to="/huiChat">蕙聊直播</router-link></li>
          <li class="item"><router-link to="/huiHealth">蕙健康</router-link></li>
          <li class="item"><router-link to="/huiShop">蕙商城</router-link></li>
        </ul>
        <!-- 右側(cè)登陸插件的 -->
        <div class="nav navbar-nav navbar-right login-wrapper">
          <login></login>
        </div>
    </div>
  </div>
</nav>

效果如圖

點(diǎn)擊了路由跳轉(zhuǎn)了 但是列表不收起來(lái)，還有就是 這個(gè)li的樣式我寫(xiě)在了響應(yīng)式里面，但是沒(méi)有效果。

@media (max-width:767px) 
.collapse
  .item
    width 100%
    &:hover
      background #e1e1e1
    .router-link-active
      color #FE007F
      border-bottom none
.login-wrapper
  display: block
  

登錄注冊(cè)模塊如果不寫(xiě)在列表中會(huì)被換行，但寫(xiě)在里面屏幕縮小的時(shí)候就會(huì)在最后，我依然想放在導(dǎo)航欄，請(qǐng)問(wèn)我這里該怎么調(diào)整呢？
我最終想實(shí)現(xiàn)的
1小屏幕下點(diǎn)擊菜單切換路由后自己關(guān)閉菜單列表
2.小屏幕下菜單欄中文字居中
3.小屏幕的時(shí)候 登陸放在導(dǎo)航欄右側(cè)，菜單按鈕在左側(cè)，并且在正常尺寸的時(shí)候不會(huì)被擠下來(lái)。
搗鼓一下午了，求各位大大給點(diǎn)思路、