====== DokuWiki Bootstrap3 サイドバーの幅設定でハマった件 ======

DokuWiki Bootstrap3 テンプレートには、サイドバーの幅を Grid クラスを指定して設定する項目があります。
標準では col-sm-3 col-md-2 だったのですが、自分は sm サイズの画面表示の際はサイドバーを非表示にしたかったので、ずっと col-md-3 のみを指定していました。
すると、sm サイズの画面表示ではサイドバーが消えたように見えたので満足していました。

==== 問題発覚 ====

が、ある日、そのサイズの画面上ではメインコンテンツのリンクやボタンがクリックできないことに気づきました。
調査していると、消えたと思っていたサイドバーの内容はページ最下部に表示されており、、、

==== 原因調査は難航 ====

メインコンテンツのリンクやボタンがクリックできなかったのは、このページ最下部に表示されたサイドバーの領域が、メインコンテンツのリンクに被っていることが原因と判りました。
ですが、それが判っても最初はテンプレートにレスポンシブがブレイクする幅の設定があったはず、と思い探したのですが、見つからず。。。（そのような設定は無いので当たり前ですが）
原因が判らず sidebar の css を触ったりテンプレートのソースを調査したり、散々調査しました。
この不具合を発見した時は Vue3 で Modal コンポーネントを実装する調査をしていた時だったので、こちらの設定が悪いのかと思い込んだりもしました。

==== 原因発見！ ====

結局、開発・検証用として DokuWiki & Bootstrap3 テンプレートの別サイトがあったので、設定内容を比較して、sm サイズ時の sidebar の幅設定がないことに気づきました。

久しぶりのフロントエンド作業のトラブルで疲れましたが、これで Modal コンポーネント開発を継続できます。 :-)