css - Bootstrap 导航栏居中链接并右对齐其他链接

Question

我在 Bootstrap 中有一个导航栏，我试图将一些链接居中，并将另一个链接拉到页面右侧。我已经添加了 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

基本上不同之处在于，您使用 Bootstrap 的网格为 Logo 设置宽度，然后为导航设置宽度，然后在导航部分内，因为您有 2 个，所以您将再次为每个使用网格位置2 个导航栏。

然后您需要一些 CSS 来覆盖向左浮动导航栏的自然行为。

  .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;}