文章/答案/技术大牛

发布

社区首页 >问答首页 >NavBar不显示

问NavBar不显示
EN

Stack Overflow用户

提问于 2018-07-29 00:09:26

回答 2查看 109关注 0票数 0

我使用了这个粒子js，但之后我做了一个响应式导航栏，但它显示出来了。但是当我尝试只显示导航栏时，它就可以正常工作了。我基本上是试图有一个完全响应性粘性顶部导航栏与此粒子js为背景，然后与导航栏中的按钮，它将链接到其他页面。

KIndly在这个错误中帮助我: My 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
        }
    }
}

html

css

particles.js

回答 2

Stack Overflow用户

发布于 2019-08-05 15:44:52

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

将其更改为

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

你需要把“导航条切换”改成class=“导航条切换”就行了。

票数 0

Stack Overflow用户

发布于 2020-08-24 17:20:27

您已经在button元素上使用了应该为class="navbar-toggle"的class="navbar-toggler"

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51573070

复制

相似问题

问NavBar不显示
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NavBar不显示EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NavBar不显示
EN