Ruby on Rails haml 导航栏汉堡菜单答案

【问题标题】：Ruby on Rails haml navigation bar hamburger menuRuby on Rails haml 导航栏汉堡菜单
【发布时间】：2018-12-29 16:35:54
【问题描述】：

我的 ruby on rails 导航栏有问题。我正在使用 haml 以及 bootstrap gem。

这是我的 application.html.haml

!!!
%html
%head
  %title GameX
  = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true 
  = javascript_include_tag 'application', 'data-turbolinks-track' => true
  = csrf_meta_tags

%body
  %nav.navbar.navbar-inverse
    .container
        %ul.nav.navbar-nav.navbar-left
          .navbar-brand= link_to "GameX", root_path

      - if user_signed_in?
        %ul.nav.navbar-nav.navbar-left
          %li= link_to "New GameX", new_pic_path
          %li= link_to "Settings", edit_user_registration_path
          %li= link_to "Sign Out", destroy_user_session_path, method: :delete
      - else
        %ul.nav.navbar-nav.navbar-left
          %li= link_to "Sign Up", new_user_registration_path
          %li= link_to "Log In", new_user_session_path

  .container
    -flash.each do |name, msg|
      =content_tag :div, msg, class: "alert alert-info"

    =yield

我想添加一个响应式的汉堡菜单。因此，当浏览器变小时，汉堡菜单会出现在导航栏品牌旁边并且是可点击的。我如何做到这一点？

我尝试在网上搜索有效的教程，但它们似乎都包含其他内容。

编辑：我已经解决了当浏览器很小时链接停留在品牌旁边的问题。

【问题讨论】：

标签： ruby-on-rails ruby haml

【解决方案1】：

看看documentation for the navbar component。

您需要在 navbar-brand 锚点旁边添加一个带有 navbar-toggle collapsed 类的汉堡菜单按钮。

您还需要将链接添加到具有 collapse navbar-collapse 类的 div 中，这是由您的汉堡菜单通过 data-target 属性触发的。

【讨论】：