javascript - Bootstrap javascript 不适用于本地托管的 Bootstrap 4

问题描述

我正在通过 Coursera 课程学习 Bootstrap，其中一个练习让我为移动屏幕制作了一个切换下拉菜单。我复制的代码与讲师完全相同，但在我的浏览器中，下拉菜单不会下拉——它只是一个按钮，单击时什么都不做。我认为这可能与 Bootstrap javascript 包未正确加载或其他原因有关，但我不确定。任何帮助将非常感激。我在这里包含了我的 HTML。我很确定 js 文件都正确的目录的路径。

<!DOCTYPE html>
<html lang="en">

<head>
     <!-- Required meta tags always come first -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
 
     <!-- Bootstrap CSS -->

     


     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/styles.css">
    <title>Ristorante Con Fusion</title>
</head>

<body>

    <nav class='navbar navbar-dark navbar-expand-sm bg-primary fixed-top'>
        <div class='container'>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#Navbar'>
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class='navbar-brand mr-auto' href='#'> Ristorante confusion</a>

            <div class='collapse navbar-collapse' id='#Navbar'>
                <ul class='navbar-nav mr-auto'>
                    <li class='nav-item'> <a class='nav-link' href='./aboutus.html'>Home</a> </li>
                    <li class='nav-item'> <a class='nav-link' href='#'>Menu</a> </li>
                    <li class='nav-item'> <a class='nav-link' href='#'>About</a></li>
                    <li class='nav-item'> <a class='nav-link' href='#'>Contact</a> </li>
                </ul>
            </div>

            
        </div>

    </nav>

    <header class="jumbotron">
        <div class="container">
            <div class ="row row-header align-items-center">
                <div class = "col-12 col-sm-6">
                    <h1>Ristorante con Fusion</h1>
                    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                </div>
                <div class = "col-12 col-sm-6">
                </div>
            </div>
        </div>
    </header>

    <div class = "container">
        <div class="row row-content align-items-center">
            <div class="col-12 col-sm-4 order-sm-last col-md-3">
                <h3>Our Lipsmacking Culinary Creations</h3>
            </div>
            <div class="col col-sm order-sm-first col-md">
                <h2>Uthappizza</h2>
                <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
            </div>
        </div>


        <div class="row row-content align-items-center">
            <div class="col-12 col-sm-4 col-md-3">
                <h3>This Month's Promotions</h3>
            </div>
            <div class="col col-sm col-md">
                <h2>Weekend Grand Buffet</h2>
                <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
            </div>
        </div>

        <div class="row row-content">
            <div class="col-12 col-sm-4 order-sm-last col-md-3">
                <h3>Meet our Culinary Specialists</h3>
            </div>
            <div class="col col-sm order-sm-first col-md">
                <h2>Alberto Somayya</h2>
                <h4>Executive Chef</h4>
                <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
            </div>
        </div>
    </div>

    <footer class ="footer">
        <div class = "container">
            <div class="row">             
                <div class="col-4 offset-1 col-sm-2">
                    <h5>Links</h5>
                    <ul class ="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-7 col-sm-5">
                    <h5>Our Address</h5>
                    <address>
                      121, Clear Water Bay Road<br>
                      Clear Water Bay, Kowloon<br>
                      HONG KONG<br>
                      Tel.: +852 1234 5678<br>
                      Fax: +852 8765 4321<br>
                      Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
                   </address>
                </div>
                <div class="col-12 col-sm-4 align-self-center">
                    <div class="text-center">
                        <a href="http://google.com/+">Google+</a>
                        <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                        <a href="http://www.linkedin.com/in/">LinkedIn</a>
                        <a href="http://twitter.com/">Twitter</a>
                        <a href="http://youtube.com/">YouTube</a>
                        <a href="mailto:">Mail</a>
                    </div>
                </div>
           </div>
           <div class = "row justify-content-center">             
                <div class ="col-auto">
                    <p>© Copyright 2018 Ristorante Con Fusion</p>
                </div>
           </div>
        </div>
    </footer>

     <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     

     
</body>

</html>

标签： javascripthtmlcsstwitter-bootstrap

javascript - Bootstrap javascript 不适用于本地托管的 Bootstrap 4

问题描述

解决方案

推荐阅读