Question

我刚刚转到Bootstrap 4并注意到我的应用程序中出现了一些奇怪的行为。所有导航栏链接在第一次尝试时都能正常工作，包括下拉列表，但在链接页面加载后，所有导航栏链接都已死亡。当我重新装载我碰巧遇到的任何页面时，它们再次活跃起来。

我的代码：

<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>

这是Bootstrap 4的已知问题，还是我看到了别的东西？

Answer 1

当我发布原始问题时，我没有说明这是一个Rails 5应用程序。

最初，我曾尝试使用bootstrap网站提供的CDN链接加载bootstrap：

<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 gem。当我按照实施说明进行操作时，一切正常。

我仍然有兴趣了解为什么CDN解决方案无效。

Navbar链接在Bootstrap 4中死亡，直到页面重新加载 - Rails 5 App

1 个答案: