0

私はちょうどブートストラップ4に移動し、私のアプリで奇妙な動作を気づいた。すべてのnavbarリンクは、ドロップダウンを含む最初の試行で正常に動作しますが、リンクされたページが読み込まれた後、すべてのnavbarリンクが停止します。私は何か起こったページをリロードすると、彼らは再び生きてくる。Navbarリンクがブートストラップ4でページが読み込まれるまでに死ぬ - Rails 5 App

マイコード:

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="/" style="color:white"> 
    ... some content 
    </a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item dropdown"> 
     ... 
     </li> 
     <li class="nav-item dropdown"> 
     ... 
     </li>  
    </ul> 
    </div> 
</nav> 

が、これはブートストラップ4の既知の問題ですか、私は何かを見ていますか?

+1

BS4に関連して聞こえません。 popper.jsがインストールされていて、ブラウザにJSエラーがないことを確認してください。 – ZimSystem

+0

ええ、popper.jsがあり、コンソールにエラーがないかチェックしました。しかし、私は再チェックします。アドバイスをいただきありがとうございます。 – guero64

答えて

0

オリジナルの質問を投稿したとき、これがRails 5アプリケーションであるとは指定しませんでした。

もともと、私は、ブートストラップサイトで提供CDNリンクを使用して、ブートストラップをロードしようとした:

<head> 

    ... 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 

    ... 

</head> 

<body> 

    ... 


    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 

    ... 

</body> 

は、私はいくつかの時間のためにこれで取り組んし、問題を解決することができませんでした。私がページをリロードしない限り、javascript関連のブートストラップコンポーネント(ポップオーバーなど)は一切動作していないようでした。

最後に、私はこれをすべて掘り起こし、ブートストラップルビーの宝石を選んだ。実装の手順に従うと、すべて正常に動作しました。

私はまだCDNソリューションがうまくいかなかった理由を知りたいと思っています。

関連する問題