、それは私のコードはどのようナビゲーションバー

Question

内のすべてのものを中央に、私は、ブートストラップナビゲーションバーですべてのものを中心にしたいです。私は、クラス「コンテナ流体」とdiv要素をセンタリングしたい

<nav class="navbar navbar-default"> 
    <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> 

は、私が「マージンを追加しようとしました： 0自動;フロート：これまでどれも」DIVませんが、それは を動作しません。私はこの追加：

.container-fluid { 
     margin: 0 auto !important; 
     float: none !important; 
    } 

はまだ

Answer 1

を動作しません。あなたは.navbar { display: flex; } を追加することができますが（その後、他のCSSを使用する必要はありません）

https://codepen.io/anon/pen/YEbrPz

Answer 2

それを修正する最も簡単な方法は、その後、中央タグを追加し、最初のnavとのdivタグからクラスを削除することです。

<nav> 
 
<center> 
 
    <div> 
 
    <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> 
 
    </center> 
 
</nav>

Answer 3

または（ナビゲーションバーのdoesntがたくさん変更した場合）は、固定幅でラッパーを作ります。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="wrap" style=" 
    margin: 0 auto; 
    width: 550px; 
"> 
    <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> 
    </div> 
</nav> 

Answer 4

問題が.navbar-headerと.navbar-brand両方がfloat:leftなので、明示的にそれを上書きする必要があるということです。次に、それらをdisplay:inline-blockに変更し、.text-centerクラスをコンテナに追加することで、それらを中央に配置できます。

.navbar .text-center > * { 
 
    float: none; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid text-center"> <!-- added text-center class here --> 
 
    <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>