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

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

这应该可以解决您的问题

Answer 2

我看到你已经链接了popper.min.js有时popper在bootstrap 4上无法正常工作。删除该链接，您需要下载并链接tether.min.js而不是popper js

Answer 3

我认为您的#navbarHeader放在错误的位置。它应该放在.navbar内才能正常工作。

<!-- Original place of `#navbarHeader` -->
<div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
        <a href="#" class="navbar-brand d-flex align-items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg><strong>Reporteca</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="true" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    </div>
    <!-- New place of `#navbarHeader`, without `.show` -->
    <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>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>