我是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版
答案 0 :(得分:0)
将代码复制到此代码段时,它可以正常工作。你确定你包括了bootstrap js&amp; amp;你的代码中的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>
&#13;