我希望我的菜單正確地浮動，直到崩潰，然後我想它居中

Question

我已經開始添加一些Bootstrap到我的網站，但遇到了一個小問題。在我的navbar中，我有五個菜單項，它們正好浮在navbardiv之內。當我調整瀏覽器的大小時，菜單項最終會摺疊成菜單圖標。點擊此圖標後，菜單再次出現，這次位於主要的navbar以下。我相信你們都很熟悉我想解釋的內容，因爲這是Bootstrap的「預設」。

我的問題是，當菜單崩潰時，我想讓菜單項居中，而不是像摺疊之前那樣漂浮。我不知道我會如何去做這件事。以下是我的HTML和CSS。

.nav { 
 
\t list-style:none; 
 
\t float:right; 
 
\t margin:0; 
 
} 
 

 
.nav li { 
 
\t float:left; 
 
\t padding:16px 25px 13px 25px; 
 
\t font-family: 'Advent Pro', sans-serif; 
 
\t font-weight: 200; 
 
\t font-size:17px; 
 
\t color:#1C1C1C; 
 
} 
 

 
.nav li:hover { 
 
\t border-bottom:2px solid #1C1C1C; 
 
} 
 
\t \t \t 
 
.navbar-toggle { 
 
\t margin-top:13px; 
 
} 
 
\t \t \t 
 
.blog { 
 
\t margin-right:20px; 
 
} 
 
\t \t \t 
 
.collapse { 
 
\t height:56px; 
 
} 
 
\t \t \t 
 
.navbar-header { 
 
\t height:55px; 
 
}

<div class="navbar navbar-default"> 
 
    \t \t  \t 
 
    \t \t \t <div class="container"> 
 
    \t \t  \t 
 
    \t \t  \t \t <div class="navbar-header"> 
 
\t \t \t \t \t  \t \t \t 
 
    \t \t  \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
    \t \t  \t \t \t 
 
    \t \t  \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
    \t \t  \t \t \t 
 
    \t \t  \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t  \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t  \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t  \t \t \t \t 
 
    \t \t  \t \t \t </button> 
 
    \t \t  \t \t 
 
    \t \t  \t \t </div> 
 
    \t \t  \t \t 
 
    \t \t  \t \t <div class="collapse navbar-collapse"> 
 
    \t \t  \t \t 
 
    \t \t  \t \t \t <ul class="nav navbar-nav"> 
 
    \t \t  \t \t \t 
 
    \t \t  \t \t \t \t <a href=""><li>Home</li></a> 
 
\t \t \t \t \t \t <a href=""><li>Gallery</li></a> 
 
\t \t \t \t \t \t <a href=""><li>About</li></a> 
 
\t \t \t \t \t \t <a href=""><li>Contact</li></a> 
 
\t \t \t \t \t \t <a href=""><li class="blog">Blog</li></a> 
 
\t \t \t \t \t \t 
 
    \t \t  \t \t \t </ul> 
 
    \t \t  \t \t 
 
    \t \t  \t \t </div> 
 
    \t \t  \t 
 
    \t \t  \t </div> 
 
    \t \t  \t 
 
    \t \t </div>

Answer 1

您可以使用媒體查詢來控制這些行爲。只需在767px以下的navbar-nav列表項中居中。

您還可以使用一些內置類將您的導航欄放在右側。請參閱Docs中的navbar-right。

查看工作示例代碼段。

.navbar .navbar-nav > li { 
 
    font-family: 'Advent Pro', sans-serif; 
 
    font-weight: 200; 
 
    font-size: 17px; 
 
    color: #1C1C1C; 
 
} 
 
.navbar .navbar-nav > li:hover { 
 
    border-bottom: 2px solid #1C1C1C; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar .navbar-nav > li { 
 
    margin-left: 16px; 
 
    margin-right: 16px; 
 
    padding-top: 25px; 
 
    padding-bottom: 25px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar { 
 
    padding-top: 25px; 
 
    padding-bottom: 25px; 
 
    } 
 
    .navbar .navbar-nav > li { 
 
    text-align: center; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> \t <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"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="">Home</a> 
 

 
     </li> 
 
     <li><a href="">Gallery</a> 
 

 
     </li> 
 
     <li><a href="">About</a> 
 

 
     </li> 
 
     <li><a href="">Contact</a> 
 

 
     </li> 
 
     <li class="blog"><a href="">Blog</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>