1

试图让我的 Bootstrap 响应式导航栏/标题工作。但是，当我在移动大小的屏幕中单击图标以显示菜单时，什么也没有发生。

为了更好地解释它，我想做一个像这样的导航栏：http: //getbootstrap.com/components/#navbar

这是我的代码：

 <!-- HEADER/NAVBAR -->
 <nav class="navbar navbar-default" 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="Images\O3_square_mid.gif"></a>
   </div>

   <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Analysstatus</a>
        </li>
        <li>
          <a href="#">Aktiva kunder</a>
        </li>
      </ul>
    </nav>
  </nav>
  <!--HEADER/NAVBAR -->

我使用的唯一 javascript 是
src="bootstrap-3.0.0/dist/js/bootstrap.min.js"

不确定我是否需要 jquery，但我尝试了使用和不使用它，但仍然没有任何反应。

4

2 回答 2

2

您对导航栏折叠有误data-target。将切换按钮更改为：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
</button>

文档引用navbar-ex1-collapse为目标，但这仅与文档相关。

演示：http ://bootply.com/90771

于 2013-10-29T17:08:42.903 回答
1

添加我的评论作为答案：
使用 Rails 或其他加载插件和依赖项的框架时，请确保问题不在于您的项目的依赖项解析。在插件依赖项中包含引导程序。例如，在 Ruby 中，您要安装以下内容：

gem install twitter-bootstrap-rails

这将确保 Bootstrap 按预期工作。

于 2013-10-29T20:16:25.583 回答