居中的 Bootstrap 3 导航栏答案

【问题标题】：Centered Bootstrap 3 nav-bar居中的 Bootstrap 3 导航栏
【发布时间】：2015-09-17 04:47:09
【问题描述】：

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

编辑：这是我们生成的 HTML 代码：

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <a id="logo" href="/">App Name</a>
    <nav>
      <ul id="main_menu" class="nav navbar-nav">
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Sign In</a></li>
        <li><a href="/signup">Sign Up</a></li>
      </ul>
    </nav>
  </div>
</header>

我们尝试了以下 CSS 代码：

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

#main_menu {
  margin: 0 auto;
  text-align:center;
}

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

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

我们也试过了：

/* Code not reproduced for brevity */

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

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

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

我们如何在不破坏布局的情况下使<ul id="main_menu" class="nav navbar-nav navbar-left">...</ul> 导航栏居中？

【问题讨论】：

无论该标记是什么，它都不是 HTML。除非您的模板代码生成正确的标记有问题，否则只发布编译后的 HTML。
在 Bootstrap 中，导航栏品牌包含在 a 类 navbar-brand 的标签中，这可能是您的问题的原因

标签： html css ruby-on-rails twitter-bootstrap-3

【解决方案1】：

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

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    .main_menu {
      width: 100%
    }

    .main_menu li {
      float:none;
      display:inline-block;
    }
  </style>
</head>
<body>
  <header class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
      <nav>
        <div class="col-xs-3">
          <a class="navbar-brand" href="/">App Name</a>
        </div>
        <div class="col-xs-6 text-center">
        <ul class="main_menu nav navbar-nav">
          <li><a href="/features">Features</a></li>
          <li><a href="/pricing">Pricing</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
        </div>
        <div class="col-xs-3">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign In</a></li>
          <li><a href="/signup">Sign Up</a></li>
        </ul>
        </div>
      </nav>
    </div>
  </header>
</body>
</html>

PS : 尽量不要在 css 中使用 id 选择器，this is why。

【讨论】：

谢谢。它确实像一个魅力。关于 CSS 中的 id 选择器：适当注明。

【解决方案2】：

您的导航栏品牌应包含在 a 标记中。将<%= link_to "App Name", root_path, id: "logo" %> 更改为

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

【讨论】：

确实如此。我刚刚使用生成的 html 代码（而不仅仅是 erb 代码）编辑了问题，您可以看到我们确实有 App Name