2017-10-01 5 views
0

をページhorizo​​ntalyを記入し、私はこのメニューを持っている:だから、メニューで

enter image description here

私はメニューに何ができる水平にページ全体を埋めますか?間違ったブートストラップクラスを使用していますか?それは単にページの一部を埋めるだけです。誰かがここで何をすべきか教えてくれますか?

ul { 
 
    list-style-type: none; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: green; 
 
    position: relative; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 30px; 
 
} 
 
#menu a { 
 
    color: black; 
 
} 
 
#menu a:hover { 
 
    color: green; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: green; 
 
    border-bottom-width: 6px; 
 
    border-radius: 4px; 
 
}
<body> 
 
    <section> 
 
    <div class="navbar navbar-default" role="navigation"> 
 
     <div class="container-fluid wrapper"> 
 
     <div class="navbar-header"> 
 
      <ul id="menu"> 
 
      <div class="row"> 
 
       <div class="col-md-12"> 
 
       <li><img src="Imagens/Logo.png"></li> 
 
       <li id="menu1"><a href="#">About us</a></li> 
 
       <li><a href="#"> Act</a></li> 
 
       <li><a href="#"> News</a></li> 
 
       <li><a href="#"> Videos</a></li> 
 
       <li><a href="#"> Contact us</a></li> 
 
       </div> 
 
      </div> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body>

答えて

1

あなたは機能的なナビゲーションバーを完璧にするつもりはないですがvarbarが水平方向に全長をカバーするために以下のコードを100%にナビゲーションバー、ヘッダーの幅を設定することができます。これはおそらく、あなたはそれが働いていない理由であるブートストラップ4で使用しようとしているブートストラップ3ナビゲーションバーであるよう

.navbar-header{ 
    width:100% 
    } 

ている理由、それは見えません。 BS3とBS4のクラスは異なります。

ブートストラップ4のナビゲーションバーの実装方法の例は、http://getbootstrap.com/docs/4.0/examples/navbars/を参照してください。

0

私はブートストラップの専門家ではありません。私はそのクラスが何をするのに使用されているのかわかりませんが、div要素を削除すると、<div class="navbar-header"></div>がChromiumで動作しました。あなたはこの ようなバグを見つけることができますのchrome開発者ツールで

ます(Ctrl + I + ShiftキーまたはCtrl +直接要素インスペクタを使用するために+ Cをシフト)

たぶん、あなたの周りにラッピングのdivにstyle="text-align: justify";を追加することができます<li>タグを使用して、メニュー項目間のスペースを動的に設定します。

ご希望の場合はお手数ですが、

関連する問題