Question

我有这个代码，我想要导航按钮的中心，特别是Page1,2和3。我使用了boostrap 3。

html{
    font-family: 'Nunito', sans-serif;
}

nav{
    opacity: 0.8;   
}

.navbar-default{
    background-color: #ff4000!important;   
    font-family: 'Nunito', sans-serif;
}

.navbar-default a{
    color: white!important;   
}

.navbar-default .active a{
    background-color: dimgrey!important;   
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

<head>
	<title>title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>

<body>
    
   
    
<nav class="navbar navbar-default" role="navigation">

      <div class="container-fluid">
            <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            
            <div class="collapse navbar-collapse" id="myNavbar">
                  <!--This is the <ul> that I want center, especifically, the buttons "Page1,2 & 3"-->
                  <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li class="dropdown">
                              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                <li><a href="#">Page 1-1</a></li>
                                <li><a href="#">Page 1-2</a></li>
                                <li><a href="#">Page 1-3</a></li>
                              </ul>
                        </li>
                      
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                  </ul>

                  <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                  </ul>
            </div>
  </div>
   

</nav>

</body>

</html>

我一直在寻找很多页面来解决这个问题，我测试了很多东西，我希望有人可以帮助我。

Answer 1

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

http://codepen.io/anon/pen/VKGONw

Answer 2

Center the nav in Twitter Bootstrap

可能重复

请参阅此jsfiddle - http://jsfiddle.net/7cGea/1/

基本上，你需要导航栏和li是不带浮动的内联块，然后将内部中心

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block
}

.navbar-inner {
  text-align:center;
}

如何在导航中居中<ul>

2 个答案: