Css 引导导航栏中心链接和右对齐其他链接

我在引导中有一个导航栏，我试图将一些链接居中，并将另一个链接拉到页面右侧。我添加了

navbar right

类，但它似乎没有任何效果

nav.navbar.navbar-default.navbar-fixed-top
  .container
    .navbar-header
      button.navbar-toggle[type="button" data-toggle="collapse" data-target=".navbar-collapse"]
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      = link_to root_path,class: 'navbar-brand' do
        .img-responsive
          =image_tag "logowhite2.png"
    .collapse.navbar-collapse
      # this part should be centered
      ul.nav.navbar-nav
        li#fat-menu.dropdown.text-center
          a.dropdown-toggle data-toggle="dropdown" href="#"
            | Users
            b.caret
          ul.dropdown-menu
            li = link_to 'Clients', clients_path
            li = link_to 'Trainers', trainers_path
            li = link_to 'Admins', admins_path
            li = link_to 'Companies', companies_path
        li = link_to 'Bookings', bookings_path
        li = link_to 'New Booking', book_user_path
        li = link_to 'Courses', courses_path

        # this part should pull to the right
        - if user_signed_in?
          ul.nav.navbar-nav.navbar-right
            li#fat-menu.dropdown
              a.dropdown-toggle data-toggle="dropdown" href="#"
                =current_user.name.capitalize
                b.caret
              ul.dropdown-menu
                li = link_to 'Sign out', destroy_user_session_path, :method=>'delete'
        - else
          li = link_to 'Sign in', new_user_session_path

---

我在这里做错了什么？

你只是缩进得太远了。您不希望一个导航栏实际上位于另一个导航栏的内部。我想你想要它们并排出现

看起来它只是来自if语句

nav.navbar.navbar-default.navbar-fixed-top
  .container
    .navbar-header
      button.navbar-toggle[type="button" data-toggle="collapse" data-target=".navbar-collapse"]
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      = link_to root_path,class: 'navbar-brand' do
        .img-responsive
          =image_tag "logowhite2.png"
    .collapse.navbar-collapse
      # this part should be centered
      ul.nav.navbar-nav
        li#fat-menu.dropdown.text-center
          a.dropdown-toggle data-toggle="dropdown" href="#"
            | Users
            b.caret
          ul.dropdown-menu
            li = link_to 'Clients', clients_path
            li = link_to 'Trainers', trainers_path
            li = link_to 'Admins', admins_path
            li = link_to 'Companies', companies_path
        li = link_to 'Bookings', bookings_path
        li = link_to 'New Booking', book_user_path
        li = link_to 'Courses', courses_path

      # this part should pull to the right
      - if user_signed_in?
        ul.nav.navbar-nav.navbar-right
          li#fat-menu.dropdown
            a.dropdown-toggle data-toggle="dropdown" href="#"
              =current_user.name.capitalize
              b.caret
            ul.dropdown-menu
              li = link_to 'Sign out', destroy_user_session_path, :method=>'delete'
      - else
        li = link_to 'Sign in', new_user_session_path

更新-主导航的对中 基本上不同的是，您使用引导的网格为徽标设置宽度，然后为导航设置宽度，然后在导航部分内部，因为您有两个导航条，所以您将再次为这两个导航条中的每一个使用网格位置

然后需要一点css来覆盖左侧浮动导航li的自然行为

  .navbar-collapse .col-sm-9 ul.navbar-nav { text-align: center; width: 100%;}
  .navbar-collapse .col-sm-9 ul.navbar-nav li { float: none; display: inline-block;}

---

如何在导航栏中间设置其他链接？

  .navbar-collapse .col-sm-9 ul.navbar-nav { text-align: center; width: 100%;}
  .navbar-collapse .col-sm-9 ul.navbar-nav li { float: none; display: inline-block;}