导航栏有'图标栏'，但不添加链接从导航

我只是习惯引导，我想让导航栏工作的移动设备。导航栏有'图标栏'，但不添加链接从导航

当它在一个小设备上时，出现按钮。但是，它不隐藏在导航栏中找到的链接。我用轨道上的红宝石建立了应用程序。

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

来源

2016-01-28 Niall Higgins

请参阅该文档，因为你似乎有很多遗漏的结构[导航栏]（https://getbootstrap.com/components/#navbar），你应该张贴您的HTML输出，以提供一个最小的，例如工作。 [MCVE] – vanburen

您需要添加class="navbar-collapse collapse"到您的导航栏格，然后将</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>

来源

2016-01-28 23:29:01

导航栏有'图标栏'，但不添加链接从导航

回答

相关问题