居中Bootstrap導航欄水平和垂直

我是Bootstrap的新手，我試圖將導航欄水平和垂直居中，所以它看起來像這樣但我似乎無法弄清楚。居中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; 
}

來源

2016-07-23 Sam

如果要居中你需要將這些規則適用於.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>

來源

2016-07-23 19:14:17 vanburen

居中Bootstrap導航欄水平和垂直

回答

相關問題