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

nogajun
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-*を使いましょう。