Bootstrap 崩溃在发布时无法正常工作（但它在本地工作）

Posted 2023-03-24

【中文标题】Bootstrap 崩溃在发布时无法正常工作（但它在本地工作）

【英文标题】：Boostrap collapse not properly working when published (but it works locally)

【发布时间】：2018-07-08 05:34:26

【问题描述】：

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

有什么帮助吗？

【问题讨论】：

你能发布代码来重现问题，而不是链接到外部网站吗？

谢谢。我正在编辑帖子。

您能否将答案添加为单独的答案并将其标记为已接受，而不是将其编辑到问题中？

解决了。该问题是在 Gulp-Uncss 过程中引起的。我只是添加了这个异常以避免发布时的错误：pipe(uncss( html: ['_site/**/*.html'], ignore: ['.fade', '.collapse', '.collapse.show', '.collapsing'] ))More information

【参考方案1】：

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

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

.collapse 
    display: none;

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

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

这应该可以解决您的问题

【讨论】：

谢谢！是的，您的评论通过消除必要的 css 帮助我注意到 uncss 进程导致了这个问题。

很高兴能帮上忙！

【参考方案2】：

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

【参考方案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"   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke- 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>

【讨论】：

感谢您的建议，但无法解决问题。