Question

我有一个导航栏，当它在移动屏幕上打开时，它不会按原样进入小菜单按钮。

如果我在Chrome上测试它，并缩小屏幕尺寸，导航栏就会折叠到手机中，但在手机屏幕上打开却无法正常工作。

我的问题是：这是我的导航栏问题吗？我在哪里可以查看导航栏折叠的位置？

这是我的导航栏

  <div class="collapse navbar-collapse col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav menu">
        <li id="posts">
          <%= link_to "POSTS", posts_path %>
        </li>
        <li id="athletes">
          <%= link_to "ATLETAS", athletes_path %>
        </li>
        <li id="videos">
          <%= link_to "VIDEOS", videos_path %>
        </li>
        <li id="products">
          <%= link_to "PRODUTOS", products_path %>
        </li>
        <li id="cardapio">
          <%= link_to "CARDAPIO", menus_path %>
        </li>
        <li id="recipes">
          <%= link_to "RECEITAS", recipes_path %>
        </li>
        <li id="contact">
          <%= link_to "QUEM SOMOS", new_contact_path%>
        </li>
        <% if session[:adm] == "true" %>
          <li>
            <%= link_to "SAIR", :controller => "adms", :action => "singOut"%>
          </li>
        <% end %>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

Answer 1

过去我遇到过类似的问题，我发现自己错过了这条线。

dynamic sql

Answer 2

我猜你没有必要的JS让事情有效。

需要JavaScript插件

如果JavaScript被禁用且视口足够窄，那么   导航栏崩溃，将无法扩展导航栏和视图   .navbar-collapse中的内容。

响应式导航栏需要包含崩溃插件   你的Bootstrap版本。

尝试添加

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

OR

<!-- Twitter Bootstrap Core JS -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>

到CSS下面的html文件中。

Answer 3

确保在标题中添加了这一行。

<meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap折叠移动导航栏无法正常工作

3 个答案: