Bootstrap 响应式导航无法正常运行答案

【问题标题】：Bootstrap Responsive Navigation not functioning properlyBootstrap 响应式导航无法正常运行
【发布时间】：2015-09-15 16:22:05
【问题描述】：

我是在 Rails 项目中使用 Bootstrap 3 的学生。目前我正在尝试实现 Bootstrap 附带的响应式导航。您可以查看项目here。如果您将视口的大小调整为类似移动设备的分辨率，导航就会消失。必须做什么才能使其与列表下拉列表的移动图标一起运行？

这是我尝试过的：

将已编译和缩小的 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>

【问题讨论】：

标签： javascript jquery css ruby-on-rails twitter-bootstrap

【解决方案1】：

您需要在这里做两件事。

添加到达移动断点时将出现的菜单。

<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>

【讨论】：

我相信这行得通。但是，我必须在移动视图中自己添加一个图标吗？
Bootstrap 应该使用自动显示它，但您也可以用自己的图标替换它。

【解决方案2】：

检查应用于每个菜单的类，并阅读有关某些类行为的 Bootstrap 文档。特别是菜单折叠的原因/时间/方式以及 navbar-collapse 和 collapse 类。

http://getbootstrap.com/components/#navbar

另外：可以使用文档中的 sn-ps 代码 - 但是了解它们的作用对于确定您的能力至关重要。祝你好运。

【讨论】：