【问题标题】:bootstrap 4 navbar collapse doesn't work (with JQuery - popper - bootstrapbootstrap 4 导航栏折叠不起作用(使用 JQuery - popper - bootstrap
【发布时间】:2021-01-26 13:01:33
【问题描述】:

美好的一天。

学习网络开发并尝试制作一个按钮来折叠导航栏。检查了以前类似问题中的答案,但没有找到对我有帮助的答案。

我必须为数据目标提供 ID,在脚本中具有正确的顺序(JQuery - Popper - Bootstrap),就像我学习视频课程中的示例一样。保存它 - 点击切换图标按钮,但没有任何反应。

这是我的代码。我哪里错了?

<!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 Con Fusion</a>
        <div class="collapse navbar-collapse" id="#Navbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">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">
    <div class="container">
        <div class="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 class="col-12 col-sm">
            </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 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>

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

【问题讨论】:

    标签: html bootstrap-4 navbar


    【解决方案1】:

    请去掉'#'

    <div class="collapse navbar-collapse" id="#Navbar">
    

    【讨论】:

    • 天哪,感觉很愚蠢 :))) 它有效。非常感谢
    猜你喜欢
    • 2015-11-14
    • 2016-12-06
    • 1970-01-01
    • 2021-10-19
    • 2013-08-10
    • 2017-10-23
    • 1970-01-01
    • 1970-01-01
    • 2018-07-21
    相关资源
    最近更新 更多