Bootstrap mobile Anzeigefehler

Question

ich die navbar für mobiles Gerät festgelegt habe ... aber mein Code vielleicht einige Fehler hat, habe ich nicht, wie es zu beheben ...

Ich habe die getbootstrap.com nachgeschlagen und versuchen Sie einige Änderungen, immer noch nicht funktionieren, was soll ich tun, um meinen Code zu ändern, um das mobile Gerät anzupassen?

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get issueed for better mobile display --> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="/">hello world</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" data-target="#bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-left"> 
      <li><%= link_to("往期",issues_path) %></li> 
      <li><%= link_to("招聘",jobs_path) %></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right" > 
       <% if !current_user %> 
        <li><%= link_to("註冊", new_user_registration_path) %> </li> 
        <li><%= link_to("登入", new_user_session_path) %></li> 
       <% else %> 

        <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         <%= gravatar_tag current_user.email, :size => 30, :default => "https://tower.im/assets/default_avatars/path.jpg"%> 
         Hi!, <%= current_user.email %> 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu" id="bs-example-navbar-collapse-1"> 
         <li> <%= link_to("管理后台", admin_users_path) %> </li> 
         <li> <%= link_to("个人信息", account_user_path(current_user)) %> </li> 
         <li> <%= link_to("登出", destroy_user_session_path, method: :delete) %> </li> 
        </ul> 
        </li> 
       <% end %> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

Answer 1

Hey versuchen dieses Tag in den Kopf setzen:

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

Wenn Sie ein wenig mehr Informationen darüber, wie das funktioniert diese Besuche Link

Answer 2

nicht klar, was die „mobile Anzeigefehler ist ", aber Ihr Markup-Code ist nicht" bootstrap valid ", also könnte Ihr Problem sein, dass beim Wechsel in die mobile Ansicht, Navbar nicht auf mobile Schaltfläche Menü minimiert.

Ihre HTML wie diese zeigen

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">hello world</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><%= link_to("往期",issues_path) %></li> 
     <li><%= link_to("招聘",jobs_path) %></li> 
     <li class="dropdown"> 
      <ul class="nav navbar-nav" > 
       <% if !current_user %> 
        <li><%= link_to("註冊", new_user_registration_path) %> </li> 
        <li><%= link_to("登入", new_user_session_path) %></li> 
       <% else %> 

        <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         <%= gravatar_tag current_user.email, :size => 30, :default => "https://tower.im/assets/default_avatars/path.jpg"%> 
         Hi!, <%= current_user.email %> 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu" id="bs-example-navbar-collapse-1"> 
         <li> <%= link_to("管理后台", admin_users_path) %> </li> 
         <li> <%= link_to("个人信息", account_user_path(current_user)) %> </li> 
         <li> <%= link_to("登出", destroy_user_session_path, method: :delete) %> </li> 
        </ul> 
        </li> 
       <% end %> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Dieser Code sollte eine navbar, die korrekt auf mobile Taste Menü kollabieren (ich weiß nicht, Ihre < %%> tagg Inhalt ...

Working fiddle