Bootstrap响应式导航无法正常运行
[英]Bootstrap Responsive Navigation not functioning properly
问题描述
我是学生，在Bootstrap 3中使用Rails项目。 目前，我正在尝试实现Bootstrap随附的响应式导航。 您可以在此处查看项目。 如果将视口调整为可移动的分辨率，导航将消失。 要使其与下拉列表中的移动图标一起运行，必须执行哪些操作？
这是我尝试过的：
将经过编译和缩小的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>将折叠和导航栏折叠添加到我的导航中
<!-- 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
您需要在这里做两件事。
- 添加到达移动断点时将出现的菜单。
<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>
- 收集要在移动菜单中显示的链接。 为此，您可以通过将上方按钮中的
data-target添加到带有链接的容器中的id中来。 如：
<nav class="navbar navbar-custom" id="bs-example-navbar-collapse-1">
...
</nav>
解决方案2
0 2015-09-15 16:50:13
检查应用于每个菜单的类，并阅读有关某些类行为的Bootstrap文档。 尤其是，为什么/时/如何菜单被折叠和类navbar-collapse和collapse 。
http://getbootstrap.com/components/#navbar
另外：可以使用文档中的代码片段-但是了解它们的功能对于确定您的能力至关重要。 祝好运。
Bootstrap Accordion Expand/Collapse 全部功能不正常
[英]Bootstrap Accordion Expand/Collapse All not functioning properly
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.