Question

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

它也没用，甚至打破了我们的布局：

enter image description here

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

Answer 1

你应该使用col-xs-X网格来做到这一点，我在这里粘贴了工作代码：

＆＃13;

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

＆＃13;

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

Answer 2

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

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

中心Bootstrap 3导航栏

2 个答案: