하고 싶은 일은 간단하다. 첫 줄에는 제목만 있다.
나는 두 번째 줄에서 내비게이션 줄을 만들고 싶다.
그러나 bootstrap3의nav샘플을 사용하면 모두 1줄에 제목과 네비게이션이 있어 마음대로 할 수 없다.
그래서 내가 노력했던 이야기.

하고 싶은 일.

첫 번째 행을 머리글로만 설정

두 번째 행을 내비게이션으로 사용

출처

    <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>

↓ 전개 후

    <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;
    }
  }
}

첫 번째 줄의 제목 부분 사용jumbotron다른 방법으로 하면 이상한 공간이 생길 것 같아서 어쩔 수 없었어요.
일반padding-top: 48px만 지정하면 padding-bottom: 48px가 지정되고 영역이 너무 넓기 때문에 조정padding

이 설정됩니다.

두 번째 줄은 안 써도 되죠nav?갑자기 이렇게 생각해btn-group사용하기 쉬워

이렇게 완성됐습니다.

아무래도 괜찮은 느낌이 들어서 기쁘고 축하할 만하다.