Question

我目前正在设置一款新应用。我打算在早上/下午使用媒体查询完全响应（第一次在真实的应用程序中执行此操作）。

我有http://bootswatch.com/yeti/主题。媒体查询似乎正常工作。我也有宝石＆＃39; bootstrap-sass＆＃39;，＆＃39;〜＆gt; 3.0.2.0＆＃39;

唯一不能正常运行的是我的导航栏。有没有人有使用Bootstrap navbars 3.0的经验？以下是我阅读的一些文档

我试图获得效果，我在导航栏的右上角有三个水平线的小方框，当你点击时，导航栏中的链接/选项下拉。

我认为＆＃34;折叠导航栏崩溃＆＃34;会产生这种效果但目前它没有做任何事情。

这是我目前的HTML：

<header>
  <div class="page-header">
      <h1 id='type'>QueAndAnswer</h1>
      <% if user_signed_in? %>
          <div>Logged in as<%= current_user.email %></div>
          <% end %>
  </div>
  <div class="navbar navbar-fixed-top navbar-inverse">
<!--     <div class='container'>
 -->
      <div class='navbar-head'>
        <a class="navbar-brand" href="http://localhost:3000">Que n A</a>
        <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="http://localhost:3000/about">About</a></li>
          <li><a href="htpp://localhost:3000/help">Help</a></li>
          </ul>
        <ul class='nav navbar-nav navbar-right'>
          <% if user_signed_in? %>
            <li><%= link_to 'Edit profile', edit_user_registration_path %></li>
            <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>

          <% else %>
            <li><%= link_to "Sign up", new_user_registration_path %></li>
            <li><%= link_to "Login", new_user_session_path %></li>
            <li><%= link_to 'Login with Github', user_omniauth_authorize_path(:github) %></li>
          <% end %>

        </ul>

      </div>

    </div>
    </div>
    </div>
    </div>
</header>

Answer 1

我能够修复此代码。这是最终结果：

<header>
  <div class="page-header">
      <h1 id='type'>QueAndAnswer</h1>
        <div id ='questionstats' class='jumbotron'></div>
          <% if user_signed_in? %>
          <div>Logged in as <strong><%= current_user.email %></strong></div>
          <% end %>
  </div>
  <div class="navbar navbar-fixed-top navbar-inverse">
    <div class='container'>
          <%= link_to 'Que n A', root_path, :class => 'navbar-brand' %>
            <button class ='navbar-toggle' data-toggle = 'collapse' 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">
                <li><%= link_to 'Home', root_path %></li>
              </ul>
              <ul class='nav navbar-nav navbar-right'>
                <% if user_signed_in? %>
                  <li><%= link_to 'Edit profile', edit_user_registration_path %></li>
                  <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
                <% else %>
                  <li><%= link_to "Sign up", new_user_registration_path %></li>
                  <li><%= link_to "Login", new_user_session_path %></li>
                  <li><%= link_to 'Login with Github', user_omniauth_authorize_path(:github) %></li>
                <% end %>
              </ul>
           </div>
        </div>
      </div>
</header>

此外，我必须将我的assets / javascript文件夹中的boostrap.js源添加到我的rails应用程序中，并将bootstrap添加到application.js文件夹中的资产管道：

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,       vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require bootstrap
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers

希望这有助于将来使用bootstrap导航的任何人，谢谢！

媒体查询导航栏？

1 个答案: