更新 - 居中主导航

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

更新 - 居中主导航

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

基本上不同之处在于你使用bootstrap的网格设置徽标的宽度，然后设置导航，然后在导航部分内，因为你有2个，你再次使用这两个导航条中每一个的网格位置。

然后你需要一点css来覆盖左边浮动导航的自然行为。

{{1}}

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

1 个答案:

更新 - 居中主导航