Bootstrap4导航按钮

yb3bgrhw 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(3)|浏览(135)

导航栏在大屏幕尺寸下工作正常。但在xs-s屏幕尺寸下，导航按钮不会展开。有人能帮我吗？
我还在HTML文件中包含了所需的脚本。我使用Bootstrap 4和Node.js，以下是HTML代码：
Ristorante Con Fusion

<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 href="http://google.com/+">Google+</a><br class="hidden-custom">
                    <a href="http://www.facebook.com/profile.php?id=">Facebook</a><br class="hidden-custom">
                    <a href="http://www.linkedin.com/in/">LinkedIn</a><br class="hidden-custom">
                    <a href="http://twitter.com/">Twitter</a><br class="hidden-custom">
                    <a href="http://youtube.com/">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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/62199789/bootstrap4-navigation-button

3条答案

按热度按时间

r55awzrz1#

看来你需要使用弹出从正确的目录。
用途：
将“/dist/popper.min.js/"替换为“/dist/umd/popper.min.js”。

赞(0）回复(0）举报 2023-05-27

o2g1uqev2#

正如@arkhz所说，问题可能是从错误的目录中使用popper。替换你的popper导入在底部与此

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

如果这不工作尝试粘贴下面的代码，它可能工作

<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>

赞(0）回复(0）举报 2023-05-27

kg7wmglp3#

嗨最好使用CDN链接的bootstrap4，以避免这种如果问题的例子：在w3schools中：

赞(0）回复(0）举报 2023-05-27