Bootstrap 导航栏未在移动设备上扩展答案

【问题标题】：Bootstrap navbar not expanding on mobileBootstrap 导航栏未在移动设备上扩展
【发布时间】：2021-05-19 17:15:18
【问题描述】：

我对引导导航栏有疑问。单击汉堡包图标后，它不会在移动设备上展开。你知道如何解决它吗？以下是我的代码和指向我的页面的链接

http://blog.medytacja.net.pl/navbartest.html

我使用引导程序 4.3.1。我检查了链接，它工作正常。我不知道这里发生了什么。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Medytacja.net.l" />
<meta name="author" content="">
<title>Nauka medytacji. Blog o medytacji - Mindfulness Budda</title>
<meta name="description" content="Blog o medytacji i rozwoju. Odpowiadamy na 
pytania, jak medytować? Blog o tematyce Mindfulness oraz Budzie. Medytować to 
sztuka ćwieczenia umysłu. Nauka medytacji. Naucz się z nami."/>


<link rel="stylesheet" href="CSS/bootstrap/css/bootstrap.min.css">
<script src="CSS/bootstrap/js/bootstrap.min.js"></script>


<!-- <script src="js/jquery.min.js"></script> -->
<link href="CSS/style.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>


  </head>
   <body>
   <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 
aria- 
   expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span 
class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
          </div>
        </div>
      </nav>
  </div>
 </body>
 </html>

【问题讨论】：

标签： html bootstrap-4 navbar

【解决方案1】：

您必须在 bootstrap.min.js 之前调用 jQuery，因为 Bootstrap 使用的是 jQuery 属性。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Medytacja.net.l" />
        <meta name="author" content="">
        <title>Nauka medytacji. Blog o medytacji - Mindfulness Budda</title>
        <meta name="description" content="Blog o medytacji i rozwoju. Odpowiadamy na 
        pytania, jak medytować? Blog o tematyce Mindfulness oraz Budzie. Medytować to 
        sztuka ćwieczenia umysłu. Nauka medytacji. Naucz się z nami."/>

        <link rel="stylesheet" href="CSS/bootstrap/css/bootstrap.min.css">
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> <!-- look at here I changed the jquery position -->
        <script src="CSS/bootstrap/js/bootstrap.min.js"></script>

        <!-- <script src="js/jquery.min.js"></script> -->
        <link href="CSS/style.css" rel="stylesheet">
        <link rel="shortcut icon" href="favicon.ico" />
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Navbar</a>
                <button 
                    class="navbar-toggler" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#navbarNavAltMarkup" 
                    aria-controls="navbarNavAltMarkup" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                        <a class="nav-item nav-link disabled" href="#">Disabled</a>
                    </div>
                </div>
            </nav>
        </div>
    </body>
</html>

【讨论】：