Bootstrap 2.3.2 可折叠导航栏不起作用答案

【问题标题】：Bootstrap 2.3.2 collapsable navbar not workingBootstrap 2.3.2 可折叠导航栏不起作用
【发布时间】：2014-08-06 08:02:49
【问题描述】：

我正在 Rails 4 中开发一个应用程序，我使用 bootstrap 2.3.2 和 bootstrap-twitter gem。

这是我的导航栏：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">BRAND</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="divider-vertical"></li>
                    <li><a href="/home/index"><%=t 'navbar.home'%></a></li>
                    <li><a href="/items"><%=t 'navbar.applications'%></a></li>
                    <%if signed_in?%>
                        <% if current_user.admin == true %>
                            <li><a href="/home/admin"><%=t 'navbar.administration'%></a></li>
                        <%end%>
                    <%end%>
                    <li class="divider-vertical"></li>
                    <li><button class="btn navbar-btn btn-success" onclick="location.reload();location.href='/items/new'"><%=t 'navbar.share'%></button></li>
                </ul>
                <ul class="nav pull-right">
                    <% if user_signed_in? %>
                        <li><a href = "/user/<%= current_user.id %>"><%= current_user.username %></a></li>
                        <li><a data-method="delete" href = "<%= destroy_user_session_path%>" rel="nofollow"><%=t 'navbar.signout'%> <i class="icon-off"></i></a><li>
                    <% else %>
                        <li><a href = "<%=new_user_registration_path%>"><%=t 'navbar.signup'%></a></li>
                        <li><a href = "<%=new_user_session_path%>"><%=t 'navbar.signin'%></a></li>
                    <% end %>
                    <li class="dropdown">
                        <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown"><%=t 'navbar.language'%><b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="/home/setlanguage/en" method="get"><img src="/assets/United-Kingdom-flag-icon.png" class="iconic"> <%=t :english%></a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="/home/setlanguage/fr" method="get"><img src="/assets/France-Flag-icon.png" class="iconic"> <%=t :french%></a></li>
                        </ul>
                    </li>
                </ul>          
            </div>
        </div>
    </div>
</div>

遗憾的是，当我尝试在手机上显示它时它并没有崩溃。我检查了常规的可折叠菜单是否正常工作，它们确实有效，所以我想我应该正确设置。因此它一定是我的代码中的错误，但我找不到它。

你知道它可能是什么吗？

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

我在一个静态 html 网页中测试了你的代码，它运行良好。

1/ 在你的 html 头部分，确保你已经包含了

bootstrap.min.css
bootstrap-responsive.css
jquery.min.js
bootstrap.min.js

2/ 它可以在计算机上运行吗？ => 如果是：你的手机浏览器是什么？

【讨论】：

在我的标题中，我有如果这是相关的，应该够了吧？这在我的电脑上也不起作用......
bootstrap.css 必须包含在之前 bootstrap-responsive.css

【解决方案2】：

    <!DOCTYPE html>
{%load staticfiles%}

        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <link href = "{% static 'your_folder/css/bootstrap.min.css' %} " rel= "stylesheet" type = "text/css" media = "all">
        <link href = "{% static 'your_folder/css/styles.css' %}" rel= "stylesheet"  type = "text/css" media = "all">
    </head>

    <body>

        <div class= "navbar navbar-inverse navbar-static-top">

            <div class="container">
                <ul class="nav nav-pills">

                <button class = "navbar-toggle" data-toggle = "collaps" data-target = ".navHeaderCollapse">
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
                <div class= "collapse navbar-collapse navHeaderCollapse">


                    <ul class= "nav navbar-nav navbar-left">
                        <ul class="nav nav-pills ">
                            <li ><a href = "/"> home </a></li>
                        </ul>   
                    </ul>
                </ul>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="{% static 'your_folder/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'your_folder/js/script.js' %}"></script>

</form>
</body>
</html>

如果我最小化浏览器并且在移动网站中也有效，这对我有用。确保您已下载 bootstrap 文件夹并修复到您的项目文件夹中，我对 ruby 不太了解，但我对 Bootstrap、css 和 html 了解一两件事。

【讨论】：

与上一个答案相同。我的标题中有几乎所有的引导程序。这不应该工作吗？