0

我刚转到Bootstrap 4并注意到我的应用程序中出现了一些奇怪的行为。所有的导航栏链接在第一次尝试时都能正常工作,包括下拉菜单,但在链接页面加载后,所有导航栏链接都已死亡。当我重新加载我碰巧遇到的任何页面时,它们再次活跃起来。Navbar链接在Bootstrap 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相关的引导组件(例如弹出窗口)工作,除非我重新加载页面。

最后,我烧掉了所有这些,并选择了bootstrap-ruby宝石。当我遵循实施说明时,一切正常。

我仍然有兴趣知道为什么CDN解决方案不起作用。

相关问题