CSSにブートストラップナビバーを配置するにはどうしたらいいですか？

Question

私は、navbar内のすべてのリンクが中心になるようにしようとしています。リンクが増えれば自動的に中心に置かれます。

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT</a></li> 
      <li><a href="#">SHOP</a></li> 
     </ul> 
    </div> 
</nav> 

Answer 1

これを試してみてください：

がultext-align:center; &がlia

Answer 2

。これは、より多くの理解に役立ちます月http://www.bootply.com/CSI2KcCoEM

.navbar-brand 
 
{ 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    text-align: center; 
 
    margin:0 auto; 
 
} 
 
.navbar-toggle { 
 
    z-index:3; 
 
}

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

 

 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button>  
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="navbar-left"><a href="#">Left 1</a></li> 
 
     <li class="navbar-left"><a href="#">Left 2</a></li> 
 
     <li class="active"><a href="#">Center 1</a></li> 
 
     <li><a href="#">Center 2</a></li> 
 
     <li><a href="#">Center 3</a></li> 
 
     <li class="navbar-right"><a href="#">Right 2</a></li> 
 
     <li class="navbar-right"><a href="#">Right 1</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

に display: inline-block;を追加してください

Answer 3

あなたはnavbarをこのように見せますか？

<div class="container"> 
     <header> 
      <nav class="navbar navbar-inverse"> 

       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">HOME</a></li> 
        <li><a href="#">ABOUT</a></li> 
        <li><a href="#">SHOP</a></li> 
       </ul> 
       </nav> 
      </header> 
     </div> 

Answer 4

あなたはあなたが使用することができ、その親要素

.navbar-nav{ 
    float:none !important; 
    margin:0 auto; 
    display:inline-block; 
} 

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid" style="text-align:center"> <!--- added text-align center ---> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT</a></li> 
      <li><a href="#">SHOP</a></li> 
     </ul> 
    </div> 
</nav> 

DEMO

Answer 5

に、その後uldisplay:inline-block;とmargin:0 auto;の財産とtext-align:center;を与えて設定し、あなたの要素をセンタリングすることができますClass="Center-block"

<div class="container-fluid" class="Center-block"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">SHOP</a></li> 
    </ul> 
</div>