ブートストラップnavbarのセンターリンクと右揃え

Question

私は、ブートストラップにnavbarを持っており、いくつかのリンクをセンタリングし、別のリンクをページの右側に引っ張っています。私は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

あなたはあまりにもインデントしすぎました。 1つのナビゲーションバーが実際に別のナビゲーションバーの内側にあることは望ましくありません。あなたはそれらを横に並べてほしいと思う。

は、それがどのように見えるそのちょうどから

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

基本的に差異ご利用のブートストラップのグリッドは、ロゴのための幅を設定することで、 navの場合は、navセクションの中に2つあるので、2つのnav barのそれぞれに対してグリッド位置を再度使用します。

次に、左に浮動するnav liの自然な振る舞いをオーバーライドするには少し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;}