センターブートストラップnavbarリンク

Question

私はブートストラップナビに取り組んでいます。しかし、私はすべてのリンクを中央に集中できません。

私は

.navbar-nav { 
    float: none; 
    /*float: none !important;*/ 
    text-align: center; 
    margin: 0 auto; 
    text-align: center; 
} 

を試してみましたが、私の例Codepenリンクをクリックすると、あなたはまだ浮い左のリンクを見ることができています。

質問それがどのように表示するfloat:leftを交換 ブートストラップとCSS

CSS

body { 
    margin: 40px 0;  
    background-color: #222222; 
} 

@media (min-width: 768px) { 

    .navbar-default { 
     background: none; 
     border: none; 
    } 

    .navbar-nav { 
     float: none; 
     text-align: center; 
     margin: 0 auto; 
     text-align: center; 
    } 

    .navbar:after { 
     margin: none; 
     content: " "; 
     position: absolute; 
     left: 0px; 
     right: 0px; 
     height: 7px; 
     background: #222 !important; 
     width: 100%; 
    } 

    a.navbar-brand { 
     transition: color 1s ease, text-shadow 0.3s ease; 
     background-color: #222 !important; 
     color: #ffffff !important; 
     display: inline-block; 
     box-sizing: border-box; 
     margin: none; 
    } 

    .navbar-nav > li > a { 
     display: inline-block; 
     box-sizing: border-box; 
     margin: none; 
     transition: background 0.1s ease 0.05s, box-shadow 0.1s ease; 
     box-shadow: 8px 0 25px rgba(0, 0, 0, 0.3); 
     color: #444; 
     background: #d9d9d9; 
     padding: 15px 45px; 
    } 

    .navbar-nav > li > a:hover, 
    .navbar-nav > li > a:focus { 
     background-image: linear-gradient(to top, #828282 0%, #7d7d7d 19%, #969696 100%); 
     box-shadow: 8px 0 25px 2px rgba(0, 0, 0, 0.3); 
     background-color: #969696; 
     color: white;  
    } 

} 

.page-container { 
    background: #eee; 
    padding-top: 25px; 
    min-height: 380px; 
    box-shadow: 6px 6px 0px #9C9698, 12px 12px 0px #6B6768; 
} 

Answer 1

でページの中央へのリンクをセンタリングすることが可能である：.navbar-nav>liのインラインブロックを

たとえば

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

Answer 2

作業のデモ：Codepen

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

Answer 3

はこれを試してみてください。

.dropdown-menu li{ 
     text-align = "center"; 
}