Bootstrap响应式导航无法正常运行
[英]Bootstrap Responsive Navigation not functioning properly
问题描述
I am student using Bootstrap 3 for a Rails project. 
我是学生，在Bootstrap 3中使用Rails项目。 Currently I am trying to implement a responsive navigation that comes with Bootstrap. 目前，我正在尝试实现Bootstrap随附的响应式导航。 You can view the project here . 您可以在此处查看项目。 If you resize the viewport to a mobile like resolution, the navigation is gone. 如果将视口调整为可移动的分辨率，导航将消失。 What must be done to have it functioning with the mobile icon for the dropdown of the list? 要使其与下拉列表中的移动图标一起运行，必须执行哪些操作？
This is what I have attempted: 这是我尝试过的：
adding the compiled and minified JS to my header
将经过编译和缩小的JS添加到我的标头中 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CanadianPoncho</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= stylesheet_link_tag 'main' %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head>adding the collapse and navbar-collapse to my navigation(s)
将折叠和导航栏折叠添加到我的导航中 <!-- NAVIGATION --> <nav class="navbar navbar-custom"> <div class="container-fluid bg-gray"> <div class="container"> <ul class="nav navbar-nav navbar-right navbar-collapse collapse"> <li> <% if current_user %> <p class="member-info"> Hello <%= link_to (current_user.username || current_user.email), edit_user_registration_path %>! - <%= link_to "Dashboard", current_user %> - <%= link_to "Sign out", destroy_user_session_path, method: :delete %></p> <% else %> <li><%= link_to "Sign In", new_user_session_path %> </li> <li><%= link_to "Sign Up", new_user_registration_path %></li> <% end %> </li> <li><input type="search" id="search" placeholder="Search..." /></li> </ul> </div> </div> </nav> <!-- BRAND + INFO --> <div class="container-fluid content-buffer bg-header"> <div class="container"> <div class="row"> <div class="col-sm-3"> <%= image_tag("pontiac_brand_footer.png", class: "img-responsive center-block") %> </div> <div class="col-sm-9 bg"> <ul class="nav navbar-nav nav-secondary navbar-left navbar-collapse collapse"> <li><%= link_to "Home", root_path %></li> <li><%= link_to "About", about_path %></li> <li><%= link_to "Registry", vehicles_path %></li> </ul> </div> </div> </div> </div>
2 个解决方案
解决方案1
1 已采纳 2015-09-15 16:52:04
Two things you need to do here. 您需要在这里做两件事。
- Add the menu that will appear when the mobile break point is reached. 添加到达移动断点时将出现的菜单。
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- Collect the links you want displayed in the mobile menu. 收集要在移动菜单中显示的链接。 You do this by adding the
data-targetvalue in the button above to theidin the container with the links.为此，您可以通过将上方按钮中的data-target添加到带有链接的容器中的id中来。 Such as:如：
<nav class="navbar navbar-custom" id="bs-example-navbar-collapse-1">
...
</nav>
解决方案2
0 2015-09-15 16:50:13
Check the classes applied to each of the menu and read Bootstrap documentation on the behavior of some of the classes. 检查应用于每个菜单的类，并阅读有关某些类行为的Bootstrap文档。 In particular the why/when/how the menus are collapsed and classes navbar-collapse & collapse . 尤其是，为什么/时/如何菜单被折叠和类navbar-collapse和collapse 。
http://getbootstrap.com/components/#navbar http://getbootstrap.com/components/#navbar
Also: It's OK to use snippets of code from documentations - however understanding what they do is paramount in determining your caliber. 另外：可以使用文档中的代码片段-但是了解它们的功能对于确定您的能力至关重要。 Good luck. 祝好运。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.