Question

尝试让我的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 = “自举-3.0.0 / DIST / JS / bootstrap.min.js”

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

Answer 1

导航栏崩溃错误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

Answer 2

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

gem install twitter-bootstrap-rails

这将确保Bootstrap按预期工作。

响应式导航栏无法正常工作

2 个答案: