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

【问题标题】：Responsive navbar not working properly响应式导航栏无法正常工作
【发布时间】：2023-03-04 00:48:01
【问题描述】：

试图让我的 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，但我尝试了使用和不使用它，但仍然没有任何反应。

【问题讨论】：

Bootstrap 中的所有 Javascript 插件都需要 JQuery 才能工作。 Bootstrap Docs 我发现从他们的入门模板开始很有帮助，其中包括指向 JQuery 的链接。 Bootstrap Template希望有帮助！
谢谢，但它是我已经使用过的模板，并且我尝试了使用和不使用 jQuery，但请记住，我需要 jQuery 来处理这些事情，即使它需要页面永远加载...
您是否包含内联文件或链接到托管存储库？ Jquery 不应过多地减慢您的加载时间。您是否正在获取文件的 .min 版本？
我猜是链接到托管仓库，正如该模板所建议的那样
尝试将它包含在您的 Rails 构建中。我不确定你是如何在 Rails 中做到这一点的，但应该将它包含在你的依赖项中，如果你在开发模式下运行应用程序，它应该减少 JQuery 的加载时间。这是Bootstrap 的 Ruby Gem 的链接。它应该包括 Jquery。

标签： twitter-bootstrap navbar

【解决方案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

【讨论】：

试过了，还是没有按预期工作。问题还是一样，当我缩小屏幕或在屏幕较小的设备上查看时，我得到了应该折叠到菜单中的按钮，但是当我点击它时没有任何反应..
您是说您的代码不起作用还是 Bootply 在较小的屏幕上不起作用？另外，您使用的是什么浏览器/设备？

【解决方案2】：

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

gem install twitter-bootstrap-rails

这将确保 Bootstrap 按预期工作。

【讨论】：