laravel 5.5 vue.js 2系 bootstrap 3系 でスマホの際にハンバーガナビを実装しようとしています。
単一コンポーネントでSPAページを実装する際に使用しています。
vue-router等も使用しています。
PCの描写の場合、loginとaboutのリンクが表示されますが、スマホの幅で見るとハンバーガーナビが出るのですが、
ハンバーガーナビが動かず、ナビが開きません。
resources/assets/js/bootstrap.js にて、
javascript
1window.$ = window.jQuery = require('jquery'); 2 3require('bootstrap-sass');
という形でJquery等は読み込んでおります。
chromeのデベロッパーツールで見るととくにエラーは出ていません。
どのような原因が考えられるでしょうか。
bootstrapでのナビ部分の知識についてもあまりありません。
よろしくお願いいたします。
↓ナビ部分
html
1<!-- header --> 2<header class="header"> 3 4<nav class="menu navbar navbar-default navbar-static-top"> 5 <div class="container"> 6 <div class="navbar-header"> 7 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 8 <span class="sr-only">メニュー</span> 9 <span class="icon-bar"></span> 10 <span class="icon-bar"></span> 11 <span class="icon-bar"></span> 12 </button> 13 <router-link to="/" class="navbar-brand">Home</router-link> 14 </div> 15 16 <div class="navbar-collapse collapse"> 17 <ul class="nav navbar-nav navbar-right dropdown-menu"> 18 <router-link to="login">login</router-link> 19 <router-link to="about">about</router-link> 20 </ul> 21 </div> 22 23</div><!-- container --> 24</nav> 25 26</header>
<router-link to="/" class="navbar-brand">Home</router-link>
の部分はaタグに直して考えていただいて大丈夫です。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。