Bootstrap 4 でレスポンシブなナビゲーションバーのサイドバードロワーを作成するにはどうすればよいですか?

Bootstrap 5 の組み込み Offcanvas コンポーネントを使用する

Bootstrap 5 Beta 3 では、新しい Offcanvas コンポーネントが導入されました。このコンポーネントを使用すると、サイドバーの作成が簡単になります。

このコンポーネントの使用例は、Bootstrap Web サイトでご覧いただけます。

Bootstrap 4 でのレスポンシブ ナビゲーションバー サイドバー ドロワーの作成

Bootstrap 4 でレスポンシブなナビゲーションバー サイドバー ドロワーを作成するには、折りたたみ、スタックされたピル、およびフレックスボックスを組み合わせて使用​​できます。

まず、container-fluid のクラスと高さ 100vh のコンテナ div を作成します。

<div class="container-fluid h-100">
  ...
</div>

コンテナ div 内に 2 つの行を作成します。最初の行にはサイドバーが含まれ、2 行目にはメイン コンテンツが含まれます。

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">
<p>サイドバーをデフォルトで非表示にするには、サイドバーに折りたたみのクラスを指定する必要があります。サイドバーの表示/非表示を切り替えるボタンを追加できます。</p>
<pre class="brush:php;toolbar:false"><button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>  

メイン コンテンツについては、col クラスを使用して残りの空きスペースを埋めます。

<div class="col">
  ...
</div>

サイドバーをスティッキーにするには、sticky-top クラスをサイドバーのナビゲーションバーに追加します。

...

最後に、CSS を追加してサイドバーのスタイルを設定し、レスポンシブにします。

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

これにより、 768 ピクセルより広い画面では、サイドバーの幅は 250 ピクセルになります。