【问题标题】:Bootstrap navbar collapse isn't working引导导航栏折叠不起作用
【发布时间】:2013-09-20 06:11:25
【问题描述】:

大家好,今天我将尝试使用 Twitter 引导程序。并将默认导航栏添加到我的页面中,只需从 HERE 复制/粘贴当我更改浏览器大小时,它会显示按钮,但是当我尝试点击它时没有任何反应,我的导航栏不是滑动。我的项目是asp.net mvc4。通过 nuget 包下载引导程序,版本 3.0。来自 bootstrap 的样式和脚本已添加到我的页面中。

有人有同样的问题吗?

导航条码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">
      <img src="~/Content/Images/logo.png" class="img-responsive" />
    </a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Main</a></li>
      <li><a href="#">Main2</a></li>
      <li><a href="#">Main3</a></li>
      <li><a href="#">Main4</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</nav>

编辑:R# 在 div 中标记了 navbar-ex1-collapse 并告知该类不存在

【问题讨论】:

  • 你可以显示你的导航条码
  • @Delphian 更新我的问题
  • 这篇文章可能重复请查看..stackoverflow.com/questions/16885180/…
  • 标记看起来是正确的,确保 boostrap.js 文件被正确加载
  • @codebreaker 他的例子基于 2.3 版本,我的基于 3.0

标签: jquery html css asp.net-mvc-4 twitter-bootstrap


【解决方案1】:

我已经为你创建了一个 fiddle,它在更改屏幕尺寸时也能正常工作,使用与你使用的代码相同的代码。

【讨论】:

  • 是的,只需要从.min改成普通的js文件,谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-19
  • 2018-03-16
  • 1970-01-01
  • 2015-11-14
  • 1970-01-01
相关资源
最近更新 更多