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個，你會再次使用這兩個導航欄中的每一個的網格位置。

然後，你需要一個小小的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;}