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>

发布时Boostrap崩溃不正常工作（但它在本地工作）

3 个答案: