【Bootstrap】ナビゲーションメニューをセンタリングして均等化する方法！
こんばんは。opiyoです。
よくあるナビゲーションメニューですが、センタリングされてないとダサいですよね。
bootstrapのnavのサンプルを、そのままコピペして試してみたのですが
- センタリングされない
- 文字数に応じた領域になってしまいかっちょ悪い
って状況だったので、色々試してみました。
サンプルそのまま
<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="#navbarEexample1"> <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="#">タイトル</a> </div> <div class="collapse navbar-collapse" id="navbarEexample1"> <ul class="nav navbar-nav"> <li><a href="#">メニューＡAAAAAAAAAAaaaaa</a></li> <li class="active"><a href="#">メニューＢ</a></li> <li><a href="#">メニューＣCc</a></li> </ul> </div> </div> </nav>
出来上がったサンプルがこちら↓↓
解決方法
センタリングして均等化させたかったので調べてみるとnav-justifiedを書けばいいってあったのでやってみたのだが上手くいかぬ。
色々と悩んでいたのだが、navにこだわる必要あるか？ってなったのでbtn-groupで囲ってるやる作戦に変更したらすんなり上手くいった。
<div class="btn-group btn-group-justified btn-group-lg">
<%= link_to root_path, class: "btn btn-default" do %>
<%= fa_icon("commenting comment-info", text: "人気") %>
<% end %>
<%= link_to root_path, class: "btn btn-default" do %>
<%= fa_icon("commenting comment-info", text: "新着") %>
<% end %>
<%= link_to root_path, class: "btn btn-default" do %>
<%= fa_icon("commenting comment-info", text: "見つける") %>
<% end %>
<%= link_to root_path, class: "btn btn-default" do %>
<%= fa_icon("commenting comment-info", text: "サイトについて") %>
<% end %>
</div>
↓html展開すると
<div class="btn-group btn-group-justified btn-group-lg"> <a class="btn btn-default" href="/"> <i class="fa fa-commenting fa-comment-info"></i> 人気 </a> <a class="btn btn-default" href="/"> <i class="fa fa-commenting fa-comment-info"></i> 新着 </a> <a class="btn btn-default" href="/"> <i class="fa fa-commenting fa-comment-info"></i> 見つける </a> <a class="btn btn-default" href="/"> <i class="fa fa-commenting fa-comment-info"></i> サイトについて </a> </div>
出来上がったサンプルがこちら↓↓
こんな感じ。 画面の領域狭めてもきちんとレスポンシブになってるぞい。
navについては、こちらのサイトにいっぱいサンプルある。やっほいー
http://bootstrap3.cyberlab.info/components/navbar.html
※「bootstrap nav」とかで調べて最初に出てくるページはbootstrap4だから注意。全然違うのよ。
まとめ
僕の場合はデザインが、ある程度見栄え良くないと作る気がどんどん失せていくので、こういうのがサラッと出来るって大事だなーと思う。
