导航栏有 'icon-bar' 但没有添加来自导航的链接

Question

我刚刚开始习惯 bootstrap，我正在尝试让导航栏适用于移动设备。

在小型设备上时，会出现该按钮。但是，它不会隐藏在导航栏中找到的链接。我在 rails 上使用 ruby 构建了应用程序。

  <!DOCTYPE html>
    <html>
    <head>
      <title>Scoreboard</title>

      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
    </head>
    <body>

    <nav class="navbar navbar-inverse ">
      <div class="container">
        <div class="navbar-header">
          <%= link_to 'Scoreboard', root_path, class: 'navbar-brand' %>
        </div>

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
        </div>

        <div id="navbar">

        </div>

         <ul class="nav navbar-nav pull-right">
        <% if signed_in? %>
            <li><%= link_to 'Live Feed', '#', :class => 'nav navbar-nav pull-right' %></li> 
            <li><%= link_to 'Profile', new_page_path, :class => 'nav navbar-nav pull-right' %></li> 
            <li><%= link_to 'Stats', new_page_path, :class => 'nav navbar-nav pull-right' %></li>
            <li><%= link_to 'Enter a score', '/scores/new', :class => 'nav navbar-nav pull-right'  %></li>
          <li><%= link_to 'Sign out', sign_out_path, method: :delete , :class => 'nav navbar-nav pull-right'%></li>
          <!-- <li style="color:grey"><span>Current:<%= current_user.email %></span></li> -->
        <% else %>

                        <li>
                            <a class="page-scroll" href="#about">About</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#services">Services</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Contact</a>
                        </li>
          <li><%= link_to 'Sign in', sign_in_path %></li>

          <% end %>

      </ul>
      </div>

    </nav>


            <% end %>


      <%= yield %>

    </body>
    </html>

Answer 1

您需要将 class="navbar-collapse collapse" 添加到您的导航栏 div，然后将 </div> 向下移动以便您的 <ul> 包含在其中。

<body>

    <nav class="navbar navbar-inverse ">
      <div class="container">
        <div class="navbar-header">
          <%= link_to 'Scoreboard', root_path, class: 'navbar-brand' %>
        </div>

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
        </div>

        <div id="navbar" class="navbar-collapse collapse">



         <ul class="nav navbar-nav pull-right">
        <% if signed_in? %>
            <li><%= link_to 'Live Feed', '#', :class => 'nav navbar-nav pull-right' %></li> 
            <li><%= link_to 'Profile', new_page_path, :class => 'nav navbar-nav pull-right' %></li> 
            <li><%= link_to 'Stats', new_page_path, :class => 'nav navbar-nav pull-right' %></li>
            <li><%= link_to 'Enter a score', '/scores/new', :class => 'nav navbar-nav pull-right'  %></li>
          <li><%= link_to 'Sign out', sign_out_path, method: :delete , :class => 'nav navbar-nav pull-right'%></li>
          <!-- <li style="color:grey"><span>Current:<%= current_user.email %></span></li> -->
        <% else %>

                        <li>
                            <a class="page-scroll" href="#about">About</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#services">Services</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Contact</a>
                        </li>
          <li><%= link_to 'Sign in', sign_in_path %></li>

          <% end %>

      </ul>
      </div>
     </div>
    </nav>


            <% end %>


      <%= yield %>

    </body>
    </html>

导航栏有 'icon-bar' 但没有添加来自导航的链接

Nav bar has 'icon-bar' but not adding links from nav

ruby-on-rails

nav

twitter-bootstrap