我试图通过重新创建"公司"主题来更好地理解Bootstrap。我遇到的问题是,我无法让导航条折叠正常工作。切换是创建的,但点击不会重新定位菜单项,而且基本上没有效果。
我很确定这是Jquery的一个问题,因为当我从"试用"部分取出该部分时,它会按预期中断。它在w3schools网站上有效,只是在codepen上无效。
不幸的是,这对我没有真正的帮助,我不知道这是与代码笔的冲突,还是我把事情搞砸了。我知道,即使我直接复制它,还是有问题。
我这里有一个代码笔,上面有相关的复制/粘贴代码作为示例,但它也写在下面。再次,是直接从W3schools。
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
这个缩写示例的唯一CSS是:
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
谢谢你的帮助,两天后我没有其他想法了。
标记是正确的,但问题是CodePen不包括bootstrap.js
。引导程序需要JS来识别data-toggle="collapse"
属性。
http://www.bootply.com/XZKwzaHKut
将Bootstrap JS添加到代码笔中,它应该对您有效。