ポートフォリオサイトのはNavbarにモバイル対応をした時に
意外と手こずったので備忘録として残します。
モバイル画面で画面が崩れる場合にItemをドロップダウン表示するボタンを追加しました。
.navbar-toggler-icon
アイコン表示
.data-target
ドロップダウン表示の対象
.data-toggle="collapse"
画面崩れをtriggerに表示/非表示の切り替え
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;"> <router-link class="nav-item nav-link navbar-brand" to="/">portfolio</router-link> <!-- ボタン追加 --> <button class="navbar-toggler-icon navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"></button> <!-- Item --> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <div class="navbar-nav"> <router-link class="nav-item nav-link" to="/">Home</router-link> <router-link class="nav-item nav-link" to="/about">About</router-link> <router-link class="nav-item nav-link" to="/works">Works</router-link> <router-link class="nav-item nav-link" to="/contact">Contact</router-link> </div> </div> </nav>
モバイル画面表示