У меня есть панель навигации, которая, когда открывается на экране мобильного устройства, не попадает в маленькую кнопку меню, как должно.

Если я протестирую его в Chrome и уменьшу размер экрана, панель навигации свернется в мобильный телефон, но открытие на экране мобильного устройства не будет работать.

Мой вопрос: это проблема с навигационной панелью? Где я могу проверить, где сворачивается навигатор?

Это моя навигационная панель

  <div class="collapse navbar-collapse col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav menu">
        <li id="posts">
          <%= link_to "POSTS", posts_path %>
        </li>
        <li id="athletes">
          <%= link_to "ATLETAS", athletes_path %>
        </li>
        <li id="videos">
          <%= link_to "VIDEOS", videos_path %>
        </li>
        <li id="products">
          <%= link_to "PRODUTOS", products_path %>
        </li>
        <li id="cardapio">
          <%= link_to "CARDAPIO", menus_path %>
        </li>
        <li id="recipes">
          <%= link_to "RECEITAS", recipes_path %>
        </li>
        <li id="contact">
          <%= link_to "QUEM SOMOS", new_contact_path%>
        </li>
        <% if session[:adm] == "true" %>
          <li>
            <%= link_to "SAIR", :controller => "adms", :action => "singOut"%>
          </li>
        <% end %>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
0
Frederico Novack Amaral Pereir 5 Янв 2016 в 20:32

3 ответа

Лучший ответ

Я предполагаю, что у вас нет JS, необходимого для работы.

Требуется плагин JavaScript

Если JavaScript отключен и область просмотра достаточно узка, чтобы сворачивать панель навигации, будет невозможно развернуть панель навигации и просмотреть содержимое внутри .navbar-collapse.

Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания.

Попробуйте добавить

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

ИЛИ

<!-- Twitter Bootstrap Core JS -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>

В ваш html-файл ниже CSS включает.

0
Ashesh Kumar Singh 5 Янв 2016 в 17:40

У меня была аналогичная проблема в прошлом, и я обнаружил, что пропустил линию.

<meta name="viewport" content="width=device-width, initial-scale=1">

1
tara 5 Янв 2016 в 17:49

Убедитесь, что вы добавили эту строку в свой заголовок.

<meta name="viewport" content="width=device-width, initial-scale=1">
0
Varun 5 Янв 2016 в 18:04