Bootstrap class 右侧导航栏无法正常工作？

Question

我正在尝试在页面右侧制作一个带有注销选项的导航栏：

|主页 |账户设置 | |注销 |

这是我使用的 haml 代码：

%html
  %head
    %title Pick 'Em
    = stylesheet_link_tag 'application', 'media' => 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

  %body
    %div.container
      %nav.nav.navbar.navbar-default{:role => "navigation"}
        .container-fluid
          %ul.nav.nav-tabs
            %li
              - if !user_signed_in?
                = link_to "Home", authenticated_root_path, :id => 'home'
              - else
                = link_to "Home", unauthenticated_root_path, :id => 'home'
              - if !user_signed_in?
                %li
                  = link_to "Login", users_sign_in_path, :id => 'login'
              - else
                %li
                  = link_to "Account Settings", users_account_settings_path, :id => 'account_settings'
          %ul.nav.nav-tabs.navbar-right  
            %li
              = link_to "Logout", destroy_user_session_path, :method => :delete, :id => 'logout'

      - if !notice.nil?
        %p.notice= notice

      - if !alert.nil?
        %p.alert= alert

      = yield

尽管我对“注销”选项卡使用了 navbar-right，但导航栏呈现如下：

|主页 |账户设置 | |注销 |

账户设置和注销是分开的，但注销不会推到右边。导航横跨页面的整个宽度，但我的 navbar-right 并没有像我期望的那样推到右边缘。有任何想法吗？谢谢！

Answer 1

您缺少 navbar-nav class 里面的 %ul

%ul.nav.navbar-nav.nav-tabs

Here is a working jsFiddle 的工作可能会帮助您了解您的实例发生了什么。您可能需要拉伸屏幕才能看到导航栏向右对齐而不是堆叠。它堆叠是因为导航栏中有 2 个不同的列表。

Bootstrap class 右侧导航栏无法正常工作？

Bootstrap class navbar-right not working correctly?

html

twitter-bootstrap

haml

frontend