我的bootstrap导航栏无法正常工作

Question

我是bootstrap的新手，在navbar（移动视图）方面遇到了一些困难。我添加了一个导航栏并添加了一个切换按钮，但它似乎并没有完美运行。我遵循教程和示例中所述的步骤，但仍然没有得到正确的结果。导航栏正在切换但是当我单击切换按钮时，它会同时切换和切换。即使在较大的屏幕上也可以看到切换按钮。这是我的代码

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div id="navbar-menu" class="collapse navbar-collapse">
                        <nav id="nav-area">
                            <ul class="nav-bar-list">
                                <li>
                                    <a>About</a>
                                </li>

                                <li>
                                    <a>Blog</a>
                                </li>

                                <li>
                                    <a>Tools</a>
                                </li>

                                <li>
                                    <a>Services</a>
                                </li>

                                <li class="contact-button">
                                    <a>Contact</a>
                                </li>
                            </ul>

                        </nav>
                    </div>

请告诉我我在哪里做错了？我正在使用bootstrap 4.0版

Answer 1

将代码复制到此代码段时，它可以正常工作。您确定在代码中包含了引导程序js和css文件以及jquery吗？如果是这样，那么你还没有发布的其他东西必须干扰。

您需要添加自己的CSS以将其隐藏在更大的屏幕上。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div id="navbar-menu" class="collapse navbar-collapse">
                        <nav id="nav-area">
                            <ul class="nav-bar-list">
                                <li>
                                    <a>About</a>
                                </li>

                                <li>
                                    <a>Blog</a>
                                </li>

                                <li>
                                    <a>Tools</a>
                                </li>

                                <li>
                                    <a>Services</a>
                                </li>

                                <li class="contact-button">
                                    <a>Contact</a>
                                </li>
                            </ul>

                        </nav>
                    </div>