導(dǎo)航欄在大尺寸屏幕上工作正常。但是在xs-s屏幕尺寸下，導(dǎo)航按鈕不會(huì)展開。有人能幫我嗎？

我還在HTML文件中包含了所需的腳本。 我將Bootstrap4與Node.js一起使用 以下是HTML代碼:

融合餐廳

<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
    <div class="container">
        <a class="navbar-brand mr-auto" href="index.html">Ristorante Con Fusion</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsable-nav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsable-nav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<header class="jumbotron"> <!-- sets apart this part of the page from others -->
    <div class="container"> 
        <div class="row row-header">
            <div class="col-12 col-sm-6">
                <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 content">
    <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 last-item align-items-center">
        <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="index.html">Home</a></li>
                    <li><a href="aboutus.html">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 >Google+</a><br class="hidden-custom">
                    <a >Facebook</a><br class="hidden-custom">
                    <a >LinkedIn</a><br class="hidden-custom">
                    <a >Twitter</a><br class="hidden-custom">
                    <a >YouTube</a><br class="hidden-custom">
                    <a href="mailto:">Mail</a><br class="hidden-custom">
                </div>
            </div>
       </div>
       <div class="row justify-content-center">             
            <div class="col-auto">
                <p>? Copyright 2018 Ristorante Con Fusion</p>
            </div>
       </div>
    </div>
</footer>

<!-- first jquery, then popper and then bootstrap.js files to work properly -->
<script src="node_modules/jquery/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/bootstrap.min.js"></script>

看起來你需要在正確的目錄下使用popper。

使用:

"/dist/umd/popper.min.js "而不是"/dist/popper.min.js/"

正如@arkhz所說，問題可能是從錯(cuò)誤的目錄使用popper。 用這個(gè)替換底部的popper導(dǎo)入

<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>

如果這不起作用，嘗試粘貼下面的代碼，它可能會(huì)工作

<nav class="navbar navbar-dark navbar-expand-sm 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 Con Fusion</a>
        <div class="collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav mr-auto ml-3">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        <i class="fa fa-home"></i> Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="aboutus.html">
                        <i class="fa fa-info"></i> About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fa fa-list"></i> Menu</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contactus.html">
                        <i class="fa fa-address-card"></i> Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<header class="jumbotron">
    <div class="container">
        <div class="row row-header">
            <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>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="row row-content align-items-center">
        <div class="col=12 col-sm-4 col-md-3">
            <h3>Our Lipsmacking Culinary Creations</h3>
        </div>
        <div class="col col-sm 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 order-sm-last">
            <h3>This Month's Promotions</h3>
        </div>
        <div class="col col-sm col-md order-sm-first">
            <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 align-items-center">
        <div class="col-12 col-sm-4 col-md-3">
            <h3>Meet our Culinary Specialists</h3>
        </div>
        <div class="col col-sm 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="aboutus.html">About</a>
                    </li>
                    <li>
                        <a href="#">Menu</a>
                    </li>
                    <li>
                        <a href="contactus.html">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="col-7 col-sm-4">
                <h5>Our Address</h5>
                <address>
                    121, Clear Water Bay Road
                    <br> Clear Water Bay, Kowloon
                    <br> HONG KONG
                    <br> <i class="fa fa-phone fa-lg"></i>: +852 1234 5678
                    <br> <i class="fa fa-fax fa-lg"></i>: +852 8765 4321
                    <br> <i class="fa fa-envelope fa-lg"></i>
                    <a href="mailto:confusion@food.net">confusion@food.net</a>
                </address>
            </div>
            <div class="col col-sm-4 align-self-center">
                <div class="text-center">
                    <a class="btn btn-social-icon btn-google" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
                    <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
                    <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
                    <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
                    <a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
                    <a class="btn btn-social-icon bg-light" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-auto">
                <p>&copy; Copyright 2018 Ristorante Con Fusion</p>
            </div>
        </div>
    </div>
</footer>

Hi最好使用CDN鏈接來避免這種問題 例如:w3schools中就有: