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

尽管我在Logout选项卡中使用了navbar-right，但导航栏的呈现方式如下：

|主页|帐户设置| |退出|

“帐户设置”和“注销”之间存在分隔，但“注销”未向右推。导航跨越页面的整个宽度，但我导航栏右侧没有按照我的预期推到右边缘。有任何想法吗？谢谢！

Answer 1

您错过了navbar-nav

中的%ul课程

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

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

Bootstrap类navbar-right无法正常工作？

1 个答案: