[解決済み] Bootstrapで折りたたみ式サイドバーを作る

質問

このページにアクセスしたところ http://www.elmastudio.de/ を拝見し、Bootstrap 3 で左サイドバーの折りたたみを構築することは可能なのだろうかと思いました。

サイドバーを上から折りたたむコード(スマホのみ)。

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

サイドバー自体にはhidden-xsクラスがあります。これは以下のjsで削除されます。

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

ボタンをクリックすると、サイドバーが上から切り替わってしまいます。上記のサイトが示すように、サイドバーが動作するのは素晴らしいことです。どんな助けでも感謝します!

どのように解決するのですか？

ブートストラップ3

はい、可能です。このオフキャンバスの例は、あなたが始めるのに役立つはずです。

https://codeply.com/p/esYgHWB2zJ

基本的には、レイアウトを外側の div で囲み、メディアクエリを使用して小さい画面でのレイアウトを切り替える必要があります。

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

また、いくつかの Bootstrap サイドバーの例はこちら

ブートストラップ 4

Bootstrap 4でレスポンシブなナビバー・サイドバー・quot;drawer"を作成する？