bootstrap折叠移动导航栏不工作

我有一个导航栏，当它在移动屏幕上打开时，它不会闯入小菜单按钮，因为它应该。bootstrap折叠移动导航栏不工作

如果我在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 -->

来源

2016-01-05 Frederico Novack Amaral Pereir

你在html中包含了必需的JavaScript文件吗？ –

您应该花时间发布完整的呈现HTML，而不仅仅是Ruby。 – vanburen

我猜测，你没有必要的JS才可以正常工作。

需要JavaScript插件

如果禁用JavaScript和视口就足够了导航栏崩溃窄，就不可能扩大导航栏和视图的.navbar崩溃中的内容。

响应式导航栏需要将折叠插件包含在您的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>

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

到您的HTML文件下面的CSS包括。

来源

2016-01-05 17:40:01

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

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

来源

2016-01-05 17:49:54 tara

确保您已在标题中加入这一行。

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

来源

2016-01-05 17:50:26 Varun

bootstrap折叠移动导航栏不工作

回答

相关问题