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

我的网站上有一个可折叠的导航栏。它会自动关闭，并且没有理论上实现的平滑效果。这是一个Bootstrap 4 Jekyll网站，它使用一个gulpfile构建，该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>

有什么帮助吗？

最佳答案

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

我检查了您的索引文件，目前您所拥有的是

.collapse {
    display: none;
}

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

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

那应该解决你的问题

关于javascript - Bootstrap崩溃在发布时无法正常工作(但在本地有效)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48502678/