Bootstrapのナビゲーションバーについて教えてください

前提・実現したいこと

Bootstrapを使用して、整ったナビゲーションバーを作成したいです。

発生している問題・エラーメッセージ

現在、ナビゲーションバーを作成した段階なのですが、ロゴマークと検索フォーム・ログインやログアウトのリンクが綺麗に横一列に並びません。ナビゲーションバーに、検索フォームを追加する前は綺麗に横一列に並んでいたのですが、追加後から何故かロゴマーク以外の検索フォームとリンクがロゴマークより上に張り付いてしまい横一列に並びません。

該当のソースコード

<body>
  <nav class="nav navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <li>
        <%= link_to root_path do %>
        <span class="navbar-brand" href="#">マムシ</span>
        <% end %>
      </li>
    </div>

<ul class="navbar-nav navbar-right">

  <% if end_user_signed_in? %>
<li><%= form_tag(search_path,:method => 'get') do %>
  <%= text_field_tag :search, nil, :placeholder => '商品名検索' %>
  <%= hidden_field_tag :target, 'item' %>
  <%= submit_tag 'Search', :name => nil %>
<% end %>
</li>
         <li>
           <a>
            &nbsp;&nbsp;<span class="glyphicon glyphicon-user"><%= @header_login_name %>様ようこそ</span>
           </a>
         </li>

         <li>
           <a href="/end_users/mypage"><span class="glyphicon glyphicon-folder-open"></span>  マイページ</a>
         </li>

         <li>
           <a href="/carts"><span class="glyphicon glyphicon-shopping-cart"></span>  カート</a>
         </li>

         <li>
           <%= link_to about_path do %>
            <span class="glyphicon glyphicon-link">About</span>
           <% end %>
         </li>

         <li>
           <%= link_to destroy_end_user_session_path, method: :delete do %>
            <span class="glyphicon glyphicon-log-out">ログアウト</span>
           <% end %>
         </li>
</ul>
  </nav>

試したこと

サイトを見ながら、applycation.scssなどを変更してみましたが上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

使っているBootstrapのバージョンは、3.3.6です。

行動規範の内容に同意します

回答1件

ベストアンサー

<div class="container-fluid"> に対応する閉じタグがなかったので、追加しました。
また、<ul class="navbar-nav navbar-right"> には nav クラスもつけてあげると、要素の高さが揃ってきれいになると思います。

以下にマークアップ例を書きましたが、link_to やform_tag は適宜 a タグや form タグに置き換えました。

html
1 <nav class="nav navbar navbar-inverse">
2   <div class="container-fluid">
3     <div class="navbar-header">
4       <li>
5         <a>
6           <span class="navbar-brand" href="#">マムシ</span>
7         </a>
8       </li>
9     </div>
10
11     <ul class="nav navbar-nav navbar-right">
12       <li>
13         <form class="navbar-form">
14           <input type="text" class="form-control" />
15           <input type="submit" value="Search" class="btn btn-default" />
16         </form>
17       </li>
18       <li>
19         <a>
20           &nbsp;&nbsp;<span class="glyphicon glyphicon-user">ゲスト様ようこそ</span>
21         </a>
22       </li>
23
24       <li>
25         <a href="/end_users/mypage"><span class="glyphicon glyphicon-folder-open"></span> マイページ</a>
26       </li>
27
28       <li>
29         <a href="/carts"><span class="glyphicon glyphicon-shopping-cart"></span> カート</a>
30       </li>
31
32       <li>
33         <a>
34           <span class="glyphicon glyphicon-link">About</span>
35         </a>
36       </li>
37
38       <li>
39         <a>
40           <span class="glyphicon glyphicon-log-out">ログアウト</span>
41         </a>
42       </li>
43     </ul>
44   </div>
45 </nav>

こちらでプレビューが見れますので、よろしければ参考にしてください。
https://codepen.io/shgtkshruch/pen/qBdOebL

すでにご存知かもしれませんが、Bootstrap の公式サイトに同じようなマークアップ例がありましたので、こちらを参考にするとわかりやすいと思います。
https://getbootstrap.com/docs/3.3/components/#navbar

投稿2020/02/13 10:12

編集2020/02/13 10:17

shgtkshruch

総合スコア665

asatuki

2020/02/13 10:38

shgtkshruchさんに頂いた回答を参考に、さっそく自分のコードを書き換えたところ綺麗に横一列並ばせることができました！！今回は分かりやすい回答に加え、プレビューまで付けていただき、本当にありがとうございました。また公式サイト等を見直し、Bootstrapを再度勉強したいと思います。改めて、今回のご回答ありがとうございました。