【Bootstrap4】グローバルナビを右寄せにする方法

 

ブロガーのかわん(@kawan0116)です。

今回は、Bootstrap4でグローバルナビを右寄せにする方法です。

前提として、

  • Bootstrap4で必要なファイルを読み込んでいる
  • Bootstrap4でコーディングしている
  • グローバルナビのコーディングが済んでいて、あとは右寄せにするだけ

方向けに書いてみたいと思います。

注意点

今回の方法は、僕の環境で上手くいっています。しかし、皆さまの環境では上手くいかない場合があります。

その時はごめんなさい。他サイト様の記事をご覧下さい。

また、コードをいじる為、失敗する可能性があります。よって、バックアップをしてから作業して下さい。

万が一不具合が発生しても僕ではサポート出来ない為、自己責任で行なって下さい。

ソースコードは以下になります

まずはソースコードをご覧頂きます。

<header class="fixed-top">
    <nav class="navbar navbar-expand-md navbar-light">
        <h1><a href="index.html" class="navbar-brand">Bootstrap4</a></h1>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
         <span class="navbar-toggler-icon"></span>
        </button>
        
        <div id="menu" class="collapse navbar-collapse justify-content-end">
         
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link home">ホーム</a></li>
                    <li class="nav-item"><a href="#menu1" class="nav-link icon">menu1</a></li>
                <li class="nav-item"><a href="#menu2" class="nav-link icon">menu2</a></li>
                <li class="nav-item"><a href="tel:000-000-0000" class="nav-link tel">000-000-0000</a></li>
                </ul>

        </div><!--menu-->
       </nav>
 </header>

長々と書いていますが、以下のソースコード「justify-content-end」を加えるだけです。

<div id="menu" class="collapse navbar-collapse justify-content-end">     

divタグの1番後ろに「 justify-content-end」を付け加えています。

たったこれだけす。とても簡単です。

以下のサイト様でも詳しく書かれていますので、気になる方はチェックしてみて下さいね。

まとめ

という事で、色々と書いてみました。

何も設定しない場合、ロゴの右側に表示されるかと思いますが、「justify-content-end」を使うことにより簡単にグローバルナビを右寄せにすることが出来ます。

グローバルナビを右寄せにしたい方はお試し下さい。

なお、何度も言いますが、コードをいじるので思わぬ事態に遭遇する可能性があります。

よって、バックアップをしてから作業して下さい。

トラブルが発生しても僕ではサポート出来ませんので、自己責任で行なって下さいね。