Question

我在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>

可悲的是，当我尝试在手机上显示时，它并没有崩溃。我检查了常规的可折叠菜单是否正常工作，他们确实这样做了，所以我想我应该正确设置好的东西。因此，我的代码中必定是错误，但我无法找到它。

你对它可能是什么有任何线索吗？

Answer 1

我在静态html网页上测试你的代码，效果很好。

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

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

2 /它在电脑上有效吗？ =＆GT;如果是的话：你的手机浏览器是什么？

Answer 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了解了一两件事。

Bootstrap 2.3.2可折叠导航栏无法正常工作

2 个答案: