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

タイトルで言いたいことが終わってしまった。 サイトのモックアップをbootstrap 5でサラっと書こうとしたらハマってしまったのでメモ。

この記事が役に立ったらコーヒーをおごろう

下のリンクはBuy me a coffeeという投げ銭システムのリンクです。役に立ったと思ったら、ぜひ投げ銭をお願いします。

続き

navbarのメニューを右側に寄せたいとき、素直に考えればnavbar-navの左側marginをautoにすればいいと思うのでクラスにml-autoと書くと思います。でも、なぜかできません。「bootstrap navbar 右寄せ」で検索しても、「できない」という話ばかり出てきます。

bootstrap 5からRTL(右から左に書く言語)に対応したのでmargin-start(ms-*)とmargin-end(me-*)が追加されました。日本語のサイトで文字は左側から始まるので、navbar-navの書き初め側にmarginを追加するms-autoにすると…。

右側に寄る!

ていうかnavbarのドキュメントもしっかりms-autoに変わってるし!

ということで、bootstrapで左右のマージンを指定するときは以前から使われていた左側ml-*と右側mr-*ではなく、開始側ms-*と終了側me-*を使いましょう。

この記事が役に立ったらコーヒーをおごろう

下のリンクはBuy me a coffeeという投げ銭システムのリンクです。役に立ったと思ったら、ぜひ投げ銭をお願いします。