Question

我是学生使用Bootstrap 3进行Rails项目。目前我正在尝试实现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>

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

Answer 2

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

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

另外：使用文档中的代码片段是可以的 - 但了解他们所做的事情对于确定您的口径至关重要。祝你好运。

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

2 个答案: