居中的Bootstrap 3导航栏

debugcn 发表于 Dev

蒂博·克莱门特（Thibaud Clement）

在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>不破坏布局的情况下将导航栏居中？

雷米·德尔海（Remi Delhaye）

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

<!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选择器，这就是为什么。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。