Question

我使用了这种粒子js，但是之后我制作了一个可回收的导航栏，但它显示出来了。但是，当我尝试仅显示导航栏时，它正在工作。我基本上是在尝试使用该粒子js作为背景的完全响应式顶部导航栏，然后使用导航栏中的那些按钮将其链接到其他页面。

请帮助我解决此错误：我的HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Particles Webpage</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

<nav class="navbar navbar-expand-md navbar-light sticky-top"  style="background-color: #e3f2fd;" >
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/logo.png"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="
            navbarResponsive">

            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Courses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Instructors</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Founders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>

                <li class="nav-item">
                    <form class="newsletter">
                        <input type="email" name="newslettertext" placeholder="Enter Your Email Id">
                        <input type="submit" name="submit" value="Subscribe">
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>



    <div id="particles-js">
        <div class="btext">
            <h1>Code Yard</h1>
            <p>Live to Code Another Day</p>
            <a href="index.html" class="btn">Get Started</a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

    <script>
        particlesJS.load('particles-js', 'particles.json',
        function(){
            console.log('particles.json loaded...')
        })
    </script>





</body>
</html>

我的CSS文件是：

body{
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
}

.btext{
    color: #f9f3f4;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
    line-height: 0.4em;
}

h1{
    font-size: 50px;
}

.btn{
    color: #fff;
    text-decoration: none;
    border: #ccc 1px solid;
    padding: 10px 15px;
    border-radius: 8px;
    line-height: 4em;
}

.btn:hover{
    color: #b19295;
    border: #fff 1px solid;
}

#particles-js{
    background-image: url('image1.jpg');
    height: 100vh;
}

我的粒子JSON文件：

    "particles":{
        "number":{
            "value":80
        },
        "color":{
            "value":"#f9f3f4"
        },
        "shape":{
            "type":"circle",
            "stroke":{
                "width":1,
                "color":"#ccc"
            }
        },
        "opacity":{
            "value":0.5,
            "random":true
        },
        "size":{
            "value":2
        },
        "line_linked":{
            "enable":true,
            "distance":110
        },
        "move":{
            "enable":true,
            "speed": 1
        }
    }
}

Answer 1

您的代码 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">

将其更改为

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarResponsive">

它将起作用

Answer 2

您在class="navbar-toggler"元素上使用了class="navbar-toggle"，应为button

导航栏未显示

2 个答案: