Question

我已经手动下载了bootstrap库并将其添加到我的代码中，并尝试单击我的bootstrap navbar-toggler按钮，它无法正常工作，但是当我尝试添加CDN Bootstrap Librabry时，它工作正常，请有人帮我做我为手动下载的引导程序库解决了这个问题

onClick={()=>{return props.onClick}}

Answer 1

尝试在“ body”的末尾添加jquery，正确的＆bootstrap js文件

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" >
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
            <title>Bootstrap Navbar</title>
            <link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
            <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>



        </head>
        <body>
            <nav class="navbar navbar-expand-sm navbar-light bg-light">
                <a href="" class="navbar-brand"><img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img></a>
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navber-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Menu 1</a>
                        </li>
                    </ul>
                </div>
            </nav>
<script src="node_modules/jquery/dist/jquery.min.js"></script>

    <script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
            <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
            <script></script>
        </body>
    </html>

Answer 2

在此处下载文件表格：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

放入项目中的任何位置（通常保存js和css的位置）通过脚本标签在html中提供它们的路径：

<script src='<absolutepath>/<file_name>'> </script>

Answer 3

如果您使用的是 Bootstrap 5，请使用：data-bs-toggle data-bs-target 并插入按钮 HTML 标记中，如下所示：

<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">

引导程序导航栏切换按钮不起作用

3 个答案: