将Bootstrap导航栏水平和垂直居中

debugcn 发表于 Dev

山姆

我是Bootstrap的新手，正在尝试将导航栏水平和垂直居中放置，因此看起来像这样，但我似乎无法弄清楚。

这是html：

<html>
    <body>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="nav navbar-nav"> 
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#pages">Pages</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#mega-menu">Mega menu</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul> 
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
</nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

和CSS：

nav {
    color: #fff;
    height: 112px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
}

来自邻居

如果您想将链接居中，则需要将这些规则应用于.navbar-nav和li类（最有可能的是，您也希望在媒体查询中使用这些规则）。

居中链接CSS

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar.navbar-default .navbar-nav > li {
    display: inline-block;
    float: none
  }
}

您可以使用line-height调整链接的高度，以使它们垂直对齐。

垂直链接对齐

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav > li > a {
    line-height: 4;
  }
}

工作示例：

.navbar.navbar-default {
  background: white;
  border: 1px solid transparent
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a,
.navbar.navbar-default .navbar-search > li > a {
  color: #266080;
}
@media (max-width: 767px) {
  .navbar.navbar-default {
    padding: 15px 0;
  }
  .navbar.navbar-default .navbar-collapse {
    margin-top: 15px;
    margin-bottom: -15px;
    border: 0;
    box-shadow: none;
  }
}
@media (min-width: 768px) {
  .navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center {
    width: 100%;
    text-align: center;
  }
  .navbar.navbar-default .navbar-nav.navbar-center > li {
    display: inline-block;
    float: none
  }
  .navbar.navbar-default .navbar-nav.navbar-center > li > a {
    line-height: 4;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
  }
  .navbar.navbar-default .navbar-search {
    position: absolute;
    right: 2%;
    top: 17px;
    line-height: 4;
    font-size: 20px;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="nav">
      <ul class="nav navbar-nav navbar-center">
        <li class="active"><a href="#home">Home</a>
        </li>
        <li><a href="#portfolio">Portfolio</a>
        </li>
        <li><a href="#blog">Blog</a>
        </li>
        <li><a href="#pages">Pages</a>
        </li>
        <li><a href="#features">Features</a>
        </li>
        <li><a href="#mega-menu">Mega menu</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right navbar-search">
        <li><a href="#"><span class="glyphicon glyphicon-search"></span> </a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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

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