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

时间:2018-03-06 21:03:52

标签: html css bootstrap-4

我是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版

1 个答案:

答案 0 :(得分:0)

将代码复制到此代码段时,它可以正常工作。你确定你包括了bootstrap js&amp; amp;你的代码中的css文件和jquery?如果是这样,那么你发布的其他东西必须干扰。

您需要添加自己的css才能将其隐藏在更大的屏幕上。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;