我希望我的菜单向右浮动直到折叠，然后我希望它居中

Question

我已经开始在我的网站上添加一些Bootstrap，但遇到了一个小问题。在我的navbar中，我有五个菜单项，它们在navbar div内浮动。当我调整浏览器大小时，菜单项最终会折叠成菜单图标。点击此图标后，菜单会再次出现，此时位于主navbar下方。我相信你们都熟悉我要解释的内容，因为这是Bootstrap的“预设”。

我的问题是，当菜单折叠时，我希望菜单项居中，而不是像折叠前那样浮动。我不知道如何做到这一点。下面是我的HTML和CSS。

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

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

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

<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">
 		   			
 		   				<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">
 		   			
 		   				<a href=""><li>Home</li></a>
						<a href=""><li>Gallery</li></a>
						<a href=""><li>About</li></a>
						<a href=""><li>Contact</li></a>
						<a href=""><li class="blog">Blog</li></a>
						
 		   			</ul>
 		   		
 		   		</div>
 		   	
 		   	</div>
 		   	
 		</div>

Answer 1

您可以使用媒体查询来控制这些行为。只需将导航栏导航列表项置于767px以下即可。

您还可以使用一些内置类将导航栏放在右侧。请参阅Docs中的navbar-right。

请参阅工作示例代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;