2017-05-27 15 views
0

私はHTMLCSSの新機能です。私はサイトの一番上にnavbarを集中させようとしています。センタリング中のNavbarが機能しない

<!-- Navigation --> 
<div class="nav_container"> 
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation"> 
     <div class="container">   
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav page-scroll" style="text-align:center"> 
        <li> 
         <a class="page-scroll" href="#page-top">Start</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#packages">Packages</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#about">About</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#showcase">Showcase</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#portfolio">Portfolio</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

そして、ここでは(一部)の関連CSSコード:

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
} 
@media (min-width: 768px) { 
    .navbar { 
    border-radius: 4px; 
    } 
} 
.nav_container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    position: relative; 
    opacity: 1; 
    text-align: center; 
} 
.nav_container nav { 
    display: inline-block; 
    text-align: center; 
} 
.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

この質問は他の質問の重複のように見える場合、私は事前に謝罪しなければならない。ここに私HTMLコードです。私は他の答えられた質問に従ってCSSコードをどのように設定すべきかについて別の順列を試しましたが、CSSコードのどのクラスが優先されているのかはまだわかりませんし、navbarはちょうどセンタリングしていません。私はブートストラップサイトからコードを取得し、単純にリバースエンジニアリングしています。すでに書き込まれているものには冗長なコードがいくつか含まれている可能性があります(たとえば、divが多すぎる可能性があります)ので、クリアする必要があります。

答えて

0

変更:

<div class="nav_container"> 
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation"> 
     <div class="container"> 

へ:

<div class="container"> 
    <div class="nav_container"> 
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation"> 

Demo

注:参照がインクリメント結果ページを結果を。

+0

おかげで、変更なし:( – pymat

+0

あなたがbootstarpを使うのか? – Ehsan

+0

私はサイトを忘れて、「ブートストラップで構築された」のようなもの、私は多くのコードを変更しました。 – pymat

関連する問題