Question

我只是习惯了引导程序，而我正试图让导航栏适用于移动设备。

当它在小型设备上时，会出现该按钮。但是，它不会隐藏导航栏中的链接。我已经在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>

导航栏有＆＃39; icon-bar＆＃39;但不是从nav添加链接

1 个答案: