Bootstrap导航栏中心链接并右对齐其他链接

Question

我在引导程序中有一个导航栏，我正在尝试将一些链接居中，并在页面右侧添加另一个链接。 我添加了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

我在这里做错了什么？

Answer 1

您只是缩进太远了。 您不希望一个导航栏实际上位于另一个导航栏中。 我想你要他们并肩。

它看起来像只是从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

更新-将主导航居中

.nav.navbar.navbar-default.navbar-fixed-top
  .container
    .col-sm-2
      .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"
    .col-sm-10
      .collapse.navbar-collapse
        .row
          .col-sm-9
            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

          - if user_signed_in?
            .col-sm-3
              ul.nav.navbar-nav
                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
            .col-sm-3
              ul.nav.navbar-nav
                li= link_to 'Sign in', new_user_session_path

基本上，区别在于您使用引导程序的网格设置徽标的宽度，然后设置导航的宽度，然后在导航部分中设置宽度，因为您拥有其中的2个，因此您将再次为这2个导航栏分别使用网格位置。

然后，您需要一点CSS来覆盖左侧浮动nav 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;}