Question

我试图通过重新创建＆＃39; the Company＆＃39;来更好地了解Bootstrap。主题。我遇到的问题是我无法让导航栏崩溃才能正常运行。切换已创建，但点击不会重新定位菜单项，它基本上没有任何效果。

我很确定这是Jquery的一个问题，因为当我从＆＃39尝试出来的那部分时，可以尝试一下。部分按预期中断。它适用于w3schools网站，而不是代码。

不幸的是，这并没有真正帮助我，我也不知道这是与codepen的冲突，还是我搞砸了。我知道即使我直接复制它仍然是错误的。

我使用相关的复制/粘贴代码作为示例编写代码here，但它也在下面编写。再次，直接来自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;
    }
  }

感谢您的帮助，在这两天后，我没有任何其他想法。

Answer 1

标记是正确的，但问题是CodePen不包含bootstrap.js。 Bootstrap需要JS来识别data-toggle="collapse"属性。

http://www.bootply.com/XZKwzaHKut

Answer 2

将Bootstrap JS添加到codepen中，它应该适合你。

从bootstrap自己的网站切换导航栏崩溃是不可复制的

2 个答案: