为什么按下按钮时 Bootstrap 导航栏不切换？答案

【问题标题】：Why doesn't the Bootstrap navbar toggle when the button is pressed?为什么按下按钮时 Bootstrap 导航栏不切换？
【发布时间】：2022-01-04 12:54:33
【问题描述】：

我正在尝试建立一个带有折叠导航栏的网站。该按钮具有正确的 ID。 Jquery 和 bootstrap 以正确的顺序包含在正文的底部。但是，当我按下按钮时，什么也没有发生。

我添加了额外的 CSS 代码来自定义我的导航栏。但是导航栏没有 CSS 代码也不能工作，所以我比较确定不是因为这个。

HTML：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Navbar test </title>
    <link href="../img/faviconlogo.png" rel="shortcut icon" type="image/x-icon">
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="navbarnavbar-default navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <img src="../img/logo.png" alt="" height="40" id="brand-icon-navbar" class="justify-content-center">
            </a>

            <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#collapseNav" aria-expanded="false" aria-controls="collapseNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapseNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 4</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 5</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 6</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script src="../js/someJavaScript.js"></script>
    <script class="script" type="text/javascript" src="../js/jquery.js" defer=""></script>
    <script src="../vendor/bootstrap/js/bootstrap.js"></script>
</body>

css:

.navbar-brand {
    font-weight: 600;
}

#brand-icon-navbar{
    vertical-align: -webkit-baseline-middle;
}

.navbar-dark .navbar-nav a {
    display: block;
    color: white !important;
    font-size: 1em;
    font-weight: lighter;
    text-decoration: none;
    margin-right: 1em;
}

.nav-item{
    margin: auto 0;
    margin-left: 1rem;
}

@media (max-width: 840px){
    .navbar .container{
        position: absolute;
        left: 0;
        right: 0;
        max-width: 95%;
        margin: auto;
    }
}

@media (min-width: 840px){
    .navbar .container{
        max-width: 1000px;
    }
}

@media(max-width:835px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar .navbar-brand {float:none;display: inline-block;}
    .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
    .navbar .navbar-nav {float:none !important;}
    .nav-item{width:100%;text-align:left;} 
    .navbar-toggler {display: block !important;}
    .navbar-toggleable-sm.collapse {display:none !important}
    .navbar-toggleable-sm.collapse.in {display:block !important}
  }

@media (min-width: 768px){
    .navbar-expand-md .navbar-collapse {
        justify-content: space-around;
    }
}

图书馆：

jQuery v3.5.1
引导程序 v4.3.1

CodePen

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

我认为导入js有问题。试试下面的第 3 行，

 as, <script src="../js/jquery.js"></script>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

替换

<script class="script" type="text/javascript" src="../js/jquery.js" defer=""></script>

与

<script src="../js/jquery.js"></script>

【讨论】：

替换 jquery 脚本实际上改变了一些东西。但是切换仍然无法正常工作。我做了一个 CodePen，所以你可以明白我的意思。
我运行了你的 codepen 并发现了问题。您编写的媒体查询正在破坏导航栏切换。注释掉 mqs，它会正常工作。 jQuery 没有问题。