Bootstrap 4 导航栏折叠不起作用 [不保持打开状态]

Question

我正在尝试使用 Bootstrap 4 实现导航栏。目前，当视口缩小到移动设备大小时，导航栏会正确折叠。但是，当尝试打开菜单时，它会打开然后迅速关闭。此处 www.vitaminak.com.br 和此处仅使用以下代码：http://www.vitaminak.com.br/nav/ 您可以检查它是否演示了此行为。我也附上了HTML。

<!DOCTYPE html>
<html>
<head>
 <base href="/" />
 <title>Vitamina K</title>
 
 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
   integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
   crossorigin="anonymous">
 
 <!-- Vitamina K CSS -->
 <link rel="stylesheet" href="http://www.vitaminak.com.br/css/style.css">
 
</head>
<body>
   <!-- NAV -->
   <nav class="navbar navbar-expand-md sticky-top navbar-expand-lg navbar-light bg-light navbar-light">
    <div class="container">
     <a class="navbar-brand pr-3 btn-roll" href="#home"><img src="http://www.vitaminak.com.br/images/vk-logo.svg" alt="Vitamina K" width="120"></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarToggler">
      <ul class="navbar-nav ml-auto text-uppercase text-truncate">
       <li class="nav-item"><a class="nav-link" href="#">MENU_NAV_1</a></li>
       <li class="nav-item"><a class="nav-link" href="#">MENU_NAV_2</a></li>
       <li class="nav-item"><a class="nav-link" href="#">MENU_NAV_3</a></li>
       <li class="nav-item"><a class="nav-link" href="#">MENU_NAV_4</a></li>
       <li class="nav-item"><a class="nav-link active" href="#">MENU_NAV_5</a></li>
      </ul>
     </div>
    </div>
   </nav>

    <!-- Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
   integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
   crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
   integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
   crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
   integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
   crossorigin="anonymous"></script>
  </body>
</html>

我采取的步骤：

正在删除所有自定义 CSS
确保 jQuery link 在 Bootstrap JS 文件之前
CSS 标签在 header
页脚中的脚本标记
从 Bootstrap 文档中复制并粘贴准确的示例（我得到了相同的行为）
确保在 Chrome 浏览器中使用 JS
使用 WC3 验证器

当然，阅读 SO 上有关此问题的各种帖子，但 none 导致了解决方案。有谁知道为什么会这样？

提前感谢您的帮助！

Answer 1

您正在 style.css

中添加以下 css

.collapse {
    display: none !important;
}

请从您的 style.css 文件中删除此 css 然后检查您的 header 它工作正常。

我希望这对你有用。

谢谢...

Bootstrap 4 导航栏折叠不起作用 [不保持打开状态]

Bootstrap 4 navbar collapse does not work [doesn't stay open]

javascript

navigation

mobile

nav

bootstrap-4