Bootstrap4のNavbarをモバイル対応

ポートフォリオサイトのはNavbarにモバイル対応をした時に
意外と手こずったので備忘録として残します。

Shuichi's portfolio

モバイル画面で画面が崩れる場合に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>


モバイル画面表示
f:id:hiramatch:20181226122717p:plain