2017-09-29 17 views
0

ブートストラップ4のグリップ、特にレスポンスメニュー。私が実装した、と広くは、以下のようにその文書から正確なコードを読んでますが問題を抱えている:ブートストラップ4のNavbarが反転して非アクティブになります。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarNav"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Features</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Pricing</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

ナビゲーションバーが表示されます逆に(画面の右側にあるアイコンを、左のメニューのトグル)、およびトグルなどボタンは何もしませんし、実際にはデフォルトで折りたたまれています。私はCodepenで試してみましたが、同じことが起こりました。私はまた、無数のCSSがChromeの開発ツールで修正されました。

これを設定しようとすると恥ずかしくて基本的なものがありませんか?誰もこのコードから逆の非アクティブなnavbarを見ている理由を誰でも説明できますか? Navbarは私がこのフレームワークを使用している最大の理由ですので、実際にそれを理解して理解したいと思っています!ヒントやアドバイスを事前に感謝します。参考のため

はここにあなたがにリンクされているウェブサイトは、ブートストラップの最新ALPHAバージョンであるBootstrap 4 Navbar page

答えて

2

です。今はベータです。

Navbarクラストグル可能に変更されました。

navclassを1つ変更すると、その違いが表示されます。

ここであなたはCodepenに追加したスタイルシートは、バージョン4.0.0ベータのためである参照 https://getbootstrap.com/docs/4.0/components/navbar/

2

のために訪問するべきページがあります。しかし、あなたが使ったマークアップは、アルファ版のドキュメントからです。ナビゲーションバーのロゴやボタンはこれであなたの現在の外部スタイルシートを置き換え、それらの正しい位置に表示されるようにするには:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css 

を、それがクリックされたときにトグルボタンが崩壊の要素を表示するようにするには、次のJavaScriptの依存関係を追加します。

https://code.jquery.com/jquery-3.1.1.slim.min.js 
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js 
関連する問題