Bootstrap 2.3.2 разборный navbar не работает

Я разрабатываю приложение в Rails 4 и использую bootstrap 2.3.2 с гемом bootstrap-twitter.

Вот мой Навбар:

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

К сожалению, он не падает, когда я пытаюсь отобразить его на телефоне. Я проверил, работают ли обычные складные меню, и они работают, так что я думаю, что я должен настроить все правильно. Поэтому в моем коде должна быть ошибка, но я не могу ее найти.

Есть ли у вас какие-либо понятия о том, что это может быть?

Источник

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>

Это работает для меня, если я сверну свой браузер, а также в эффективности на мобильном сайте. Убедитесь, что вы загрузили папку начальной загрузки и исправили ее в папке проекта. Я мало знаю о ruby, но я знаю кое-что о Bootstrap, css и html.

Источник

Я тестирую ваш код на статической HTML-странице, и он работает хорошо.

1 / Убедитесь, что вы указали в разделе html head

  • bootstrap.min.css
  • самозагрузки-responsive.css
  • jquery.min.js
  • bootstrap.min.js

2 / Это работает на компьютере? => если да: какой у вас браузер на мобильном телефоне?

Источник
Другие вопросы по тегам