bootstrap 5でnavbarを右寄せにしたいならmr-auto/ml-autoではなくms-auto/me-autoを使え

nogajun
タイトルで言いたいことが終わってしまった。 サイトのモックアップをbootstrap 5でサラっと書こうとしたらハマってしまったのでメモ。
navbarのメニューを右側に寄せたいとき、素直に考えればnavbar-nav
の左側marginをautoにすればいいと思うのでクラスにml-auto
と書くと思います。でも、なぜかできません。「bootstrap navbar 右寄せ」で検索しても「できない」という話ばかり出てきます。
bootstrap 5からRTL対応でmargin-start(ms-*)
とmargin-end(me-*)
が追加されています。日本語のサイトだと左側から始まるので、navbar-nav
のstart側にmarginを追加するms-auto
にすると…。右側に寄る! ていうかnavbarのドキュメントもしっかりms-auto
に変わってるし!
ということで、左右のマージンを指定するときは以前から使われていた左側ml-*
と右側mr-*
ではなく、開始側ms-*
と終了側me-*
を使いましょう。