AdminLTEで左メニューを非表示にする方法

AdminLETでコンテンツ部分のみ表示させたいことがあったので、以下の方法で試しました。

前提条件

• AdminLTEはv3です。
• CSSを直接編集することはしたくなかったので、html上に直接 styleタグ として記述しました。

やったこと

まずは余分な箇所を非表示

aside.main-sidebar {display: none;} /* メニューを非表示 */
nav.main-header {display: none;} /* ヘッダーを非表示 */
div.content-header {visibility: hidden;} /* パンくずを非表示 */

パンくずは display:none だと上部のマージンがなくなってしまったので、visibility:hidden としています。

ただ、これだけでは、メニュー部分が空白で残ってしまうので、以下も必要です。

div.content-wrapper {margin-left: 0 !important;} /* コンテンツ部分のマージンを削除 */

content-wrapper の margin-left はメディアクエリーで定義されているので、!important が必要でした。

けっこう力技なので、もっと良いやり方ありそうですが、実現するにはこれでいけました。