html - Bootstrap 导航栏在移动 View 中错误地将链接呈现为单独的行(Ruby on Rails 应用程序)- 如何修复？

Question

在我的 Ruby on Rails 应用程序中，所有内容在桌面 View 上都呈现良好，但是当我从我的 iPhone 访问该站点时，导航栏呈现得太大了:

http://i.imgur.com/SWcklWw.png

正如您在图片中看到的，“主页”和“登录”按钮在导航栏中是分开的行，但它们应该在一行上，与左侧的 Logo 相同。

我怎样才能解决这个问题，以便在网站的移动版本上看起来更好...？如果它可能有帮助，这里还有 header 的代码......我替换了网站的名称只是因为我不希望人们在它达到生产质量之前访问它。

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
        <%= link_to "(site name)", root_path, id: "logo" %> 
        <nav>
            <ul class="nav navbar-nav pull-right">
                <li>
                  <%= link_to root_path do %>
                  <span class="glyphicon glyphicon-home"></span>&nbsp;Home
                  <% end %>
                </li>
                <% if logged_in? %>
                    <li>
                        <%= link_to new_listing_path do %>
                        <span class="glyphicon glyphicon-plus"></span>&nbsp;New Listing
                        <% end %>
                    </li>
                    <li>
                        <%= link_to users_path do%>
                        <span class="glyphicon glyphicon-th-list"></span>&nbsp;Users
                        <% end %>
                    </li> 
                    <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                            <li>
                                <%= link_to current_user do %>
                                <span class="glyphicon glyphicon-user"></span>&nbsp;Profile
                                <% end %>
                                </li> 
                            <li>
                                <%= link_to edit_user_path(current_user) do %>
                                <span class="glyphicon glyphicon-cog"></span>&nbsp;Settings
                                <% end %>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <%= link_to logout_path, method: "delete" do %>
                                <span class="glyphicon glyphicon-log-out"></span>&nbsp;Log out
                                <% end %>
                            </li>
                        </ul>       
                    </li>
                <% else %>
                    <li>
                        <%= link_to login_path do %>
                        <span class="glyphicon glyphicon-log-in"></span>&nbsp;Log in
                        <% end %>
                    </li>
                <% end %>
            </ul>
    </nav>
  </div>
</header>

Answer 1

给你。

<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="/">"(site name)"</a>
    </div>
        <div class="collapse navbar-collapse" id="navbar">  
       <ul class="nav navbar-nav navbar-right">
         <li>
           <%= link_to root_path do %>
           <span class="glyphicon glyphicon-home"></span>&nbsp;Home
           <% end %>
         </li>
                 <% if logged_in? %>        
         <li>
             <%= link_to new_listing_path do %>
             <span class="glyphicon glyphicon-plus"></span>&nbsp;New Listing
             <% end %>
         </li>
            <li>
                <%= link_to users_path do%>
                <span class="glyphicon glyphicon-th-list"></span>&nbsp;Users
                <% end %>
            </li>                           
                 <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Account</a>
                <ul class="dropdown-menu" role="menu">
             <li>
                 <%= link_to current_user do %>
                 <span class="glyphicon glyphicon-user"></span>&nbsp;Profile
                 <% end %>
                 </li>
             <li>
                 <%= link_to edit_user_path(current_user) do %>
                 <span class="glyphicon glyphicon-cog"></span>&nbsp;Settings
                 <% end %>
             </li>
             <li class="divider"></li>
             <li>
                 <%= link_to logout_path, method: :delete do %>
                 <span class="glyphicon glyphicon-log-out"></span>&nbsp;Log out
                 <% end %>
             </li>
            </ul>
         </li>

                 <% else %>
         <li>
             <%= link_to login_path do %>
             <span class="glyphicon glyphicon-log-in"></span>&nbsp;Log in
             <% end %>
         </li>
                 <% end %>
      </ul>
        </div>
  </div>
</nav>