【Bootstrap】グローバルナビを「右寄せ」「左寄せ」にする方法

Bootstrapを使ってる時に、グローバルナビを「右寄せ」、「左寄せ」にする方法を解説します。

とても簡単に実装できますが、僕の環境でのみ表示テストをしていますので、もし出来なかったらごめんなさい・・・

Bootstrapを使用している時にグローバルナビを「右寄せ」「左寄せ」にする方法

まずはソースコードをご覧下さい。

<div id="gnavi" class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav">
           <li><a href="index.html">home</a></li>
           <li><a href="#works">works</a></li>
           <li><a href="#about">about</a></li>
           <li><a href="https://twitter.com/kawan0116"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    </ul>
</div>

上記はグローバルナビのソースコードの一部です。長々と書いていますが注目するべきところは以下になります。

<div id="gnavi" class="collapse navbar-collapse navbar-right">

上記の最後に書いている部分で「navbar-right」にすると、グローバルナビは右寄せになります。

左寄せにする場合は、「navbar-left」と指定します。

  • 右寄せにする場合:navbar-right
  • 左寄せにする場合:navbar-left

と覚えておけば良いと思います。

まとめ

上記に書きましたように、僕の環境では上記の設定でグローバルナビを右寄せ、左寄せににすることが出来ています。

もし、出来なかったらごめんなさい・・・