Posted at

Bootstrap3でnavを使うとタイトル行とナビゲーション行を分割(2行)にできない

More than 1 year has passed since last update.

やりたいことは単純で1行目をタイトルだけ。

2行目にナビゲーションの行を作りたい。

が、bootstrap3navのサンプルを使うと全部が1行にタイトルとナビゲーションがあって思い通りにならない。

なので、頑張ってみたお話。


やりたいコト


  • 1行目をタイトルだけにする

  • 2行目をナビゲーションにする

ナビゲーション・バー_≪_コンポーネント_≪_Bootstrap3日本語リファレンス.png


ソース

    <header class="jumbotron title text-center">

<h1><%= link_to "MAPACHANNEL", root_path %></h1>
</header>
<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展開後

    <header class="jumbotron title text-center">

<h1><a href="/">MAPACHANNEL</a></h1>
</header>
<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>

// title

.jumbotron {
padding: 20px 0;
margin: 0px;
}

.title{
background-color: #222;
border-color: #090909;
h1 {
font-size: 24px;
a {
color: #FFF;
}
}
}


  • 1行目のタイトル部分はjumbotronを使って作成

    なんか別のやり方でやると妙なスペースが入ってどうしようもなかったので。

    ただ普通に指定するとpadding-top: 48pxpadding-bottom: 48pxが指定されていて領域広すぎるので調整するpaddingを設定した


  • 2行目はnavを使わなくてもいいじゃね?とふと思いbtn-groupを使ったらすんなり出来た


で完成したのが、こんな感じ。

Mapachannel.png

なんとなくいい感じになったので、めでたしめでたし。