Bootstrap3のnavbar

まずは公式サイトのnavbarのサンプルHTMLを簡素にしたものです。

<nav class="navbar navbar-default">
 <div class="container-fluid">
  <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">favorite</a></li>
        <li><a href="#">食べ物</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">音楽<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">邦楽</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">洋楽</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>  

このままでも十分に使用できる感じですよね。ただ、上記のnavbarではメニューの項目の幅が均等にならない…

そして、何よりheaderの項目は均等幅にしたいってことが多いと思います。

しかし、Bootstrap3の公式ページでも

Justified navbar nav links are currently not supported.

と対応していないことが記載されています。カスタマイズするしかない！！

Bootstrap3のnavbarをカスタマイズ

CSSのdisplayの「table」と「table-cell」を使用してメニューの項目の幅を均等にしていきます。

上記のnavbarではメニューの項目の幅が均等になっています。横幅をcalcでnav内が綺麗に一段に収まるように調節をしています。文字が段落ちしないように横幅を調整してあげれば、綺麗に収まると思います。スマホ表示時は、そのままBootstrap3にお任せです。

CSSのコード下記の通り。clacの値は、navbar-brandの横幅を入れてあげれば一段に収まるように調節できるはず。

<style>
  @media (min-width: 768px) {
    .le-navbar-table {
      display: table;
      table-layout: fixed;
      text-align: center;
      width: calc(100% - navbar-brandの横幅);
    }
    .le-navbar-table > li {
      float: none !important;
      display: table-cell;
      vertical-align: middle;
    }
  }
</style>

<ul class=”nav navbar-nav navbar-right”>の箇所にle-navbar-tableのクラスを追加すればOKです。

これで、Bootstrap3のnavbarのメニューの項目の幅を均一にカスタマイズできました。

日々勉強！！このブログも少しずつかっこよくしていきたい!!

参考：Bootstrap3の公式サイト