Html 居中引导3导航条

在Rails应用程序内部，使用Bootstrap 3，我们正在尝试构建一个具有以下功能的导航：

• 左侧对齐的徽标
• 主菜单，居中
• 右侧对齐的登录/注册菜单

到目前为止，这是我们的_header.html.erb部分布局文件：

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "App Name", root_path, id: "logo" %>
    <nav>
      <ul id="main_menu" class="nav navbar-nav navbar-left">
        <li><%= link_to "Features",   features_path %></li>
        <li><%= link_to "Pricing",   pricing_path %></li>
        <li><%= link_to "Blog", '#' %></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Sign In", '#' %></li>
        <li><%= link_to "Sign Up", signup_path %></li>
      </ul>
    </nav>
  </div>
</header>

它不起作用（没有改变任何东西）

我们还尝试：

/* Code not reproduced for brevity */

#main_menu {
          width: 100%;
          text-align:center;
        }

        #main_menu li {
          float:none;
          display:inline-block;
        }

它也不起作用，甚至破坏了我们的布局：

---

我们如何才能在不破坏布局的情况下将导航栏置于

。
导航栏居中？
您的导航栏品牌应附在
标签中。将
更改为

<a class="navbar-brand" href="<%= root_path %>">APP NAME</a>

您应该使用
col-xs-X
网格来执行此操作，我已将工作代码粘贴到此处：



.主菜单{
宽度：100%
}
.主菜单李{
浮动：无；
显示：内联块；
}









无论该标记是什么，它都不是HTML。除非您的模板代码生成正确的标记有问题，否则只发布编译后的HTML。在Bootstrap中，navbar品牌包含在类
navbar品牌的
标记中。我刚刚用生成的html代码（而不仅仅是erb代码）编辑了这个问题，您可以看到我们确实收到了感谢。它确实很有魅力。关于CSS中的id选择器：请注意。
/* Code not reproduced for brevity */

#main_menu {
          width: 100%;
          text-align:center;
        }

        #main_menu li {
          float:none;
          display:inline-block;
        }

<a class="navbar-brand" href="<%= root_path %>">APP NAME</a>