アイテムをブートストラップ固定ナビゲーションバーに集中させる方法は？

Question

floowingコードでは、float:noneを設定し、ナビゲーションの中心に項目をプッシュする技術を集中しようとしましたが、機能していませんでした。

アイテムをナビゲーションバーの中央に置くにはどうすればよいですか？

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

あなたはこのような何かを行うことができます：

.container-fluid{ 
    text-align: center; 
} 
.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 

これはあなたのナビゲーションのアイテムを中心に説明します。これを試してみたい場合は、JS Fiddleをここにチェックしてください。