Question

我正在尝试构建一个在小屏幕中使用Bootstrap的折叠功能的导航栏。这是我的导航栏的代码：

%nav{:class => "navbar navbar-default", :id => "nav_inicio", :role =>"navigation"}
  .container-fluid
    /Brand and toggle get grouped for better mobile display
    .col-lg-2.col-xs-1
    .col-lg-2.navbar-header
      %button{:class => "navbar-toggle", "data-toggle" => "collapse", "data-target" => "#navbar-collapse"}
        %span.sr-only
          Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

    /Collect the nav links, forms, and other content for toggling
    .collapse.navbar-collapse.navbar-right#navbar-collapse
      %ul.nav.navbar-nav
        - if usuario_signed_in?
          %li.text-center
            = link_to :controller => "/ldi", :action => "new" do
              Recomendar lugar
          %li.text-center
            = link_to "#" do
              Mis lugares recomendados
          %li.text-center
            = link_to "#" do
              Mis lugares valorados
          %li.text-center
            = link_to "#" do
              Mis comentarios
          %li.divider.nav-divider
          %li.active.text-center
            = link_to :edit_usuario_registration do
              = current_usuario.nombre.upcase
          %li.text-center
            = link_to :destroy_usuario_session, :method => 'DELETE' do
              Salir
        - else
          %li.active.text-center
            = link_to :new_usuario_session do
              Entrar
          %li.text-center
            = link_to :new_usuario_registration do
              Registrar

当我缩小笔记本电脑上的Chrome浏览器窗口时，它正常工作（显示折叠按钮而不是导航栏导航），但我的移动浏览器上既没有显示该按钮，也没有显示Chrome的模拟工具。< / p>

怎么可能修好？

Answer 1

你错过了

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

您的<head>中的

会影响视口宽度的确定方式，从而影响导航栏的@media次查询。

更多信息：

Answer 2

您可能需要在导航下使用此类内容;

<div class="navbar-header">
         <button class="navbar-toggle" type="button" 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><!--//nav-toggle-->
 </div><!--//navbar-header-->

密切关注<button> </button>代码之间的内容，因为这是在小屏幕视图中创建的方式。

Bootstrap 3：小屏幕上未显示折叠按钮

2 个答案: