javascript - Bootstrap 崩溃在发布时无法正常工作(但它在本地工作)

Question

我的网站上有一个可折叠的导航栏。它会自动关闭，并且没有理论上实现的平滑效果。这是Bootstrap 4 Jekyll 网站使用 gulpfile 构建，可连接、缩小和丑化 HTML、CSS 和 Javascript:http://reporteca.umh.es/
除了可折叠导航栏之外的所有内容都运行良好。可折叠导航栏实际上在我的计算机本地加载时有效，但在发布时无效。

我猜这个问题可能是由 HTML/css 缩小过程引起的。

这就是它在 DOM 中的样子:

<div class="bg-dark collapse" id="navbarHeader" style="">
  <div class="container">
    <div class="row">
      <div class="col-sm-8 col-md-7 py-4">
        <h4 class="text-white">Acerca de</h4>
        <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
      </div>
      <div class="col-sm-4 offset-md-1 py-4">
        <h4 class="text-white">Contacto</h4>
        <ul class="list-unstyled">
          <li><a href="#" class="text-white">Twitter</a></li>
          <li><a href="#" class="text-white">Facebook</a></li>
          <li><a href="#" class="text-white">Email</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

记住:相同的代码在本地可以运行，但在发布时就不行了。

Javascript 文件与 Bootstrap 4 中的完全相同:

<script src="/js/jquery-slim.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

请问有什么帮助吗？

Answer 1

导航栏打开时的 css 样式似乎丢失了。

我检查了你的索引文件，目前你拥有的是这个

.collapse {
    display: none;
}

用你的CSS文件中的这段代码替换

.collapse {
  display: none;
  &.show {
    display: block;
  }
}

这应该可以解决您的问题