Question

我最近在www.wrapboostrap.com上买了一个twitter bootstrap模板，然后我刚刚将css文件添加到资产/样式表中并对javascripts执行相同操作，也将每个css文件中的路径更改为资产/图像css的东西，但当我在nav.html.erb上放置导航栏标记时，导航栏会显示所有选项列表，而不会点击它。（见图）我还在application.js文件中添加了// = require bootstrap行。

enter image description here

这是我的标记

application.html.erb

    <!DOCTYPE html>
<html>
<head>
  <title>Mymaps</title>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application"%>
  <%= stylesheet_link_tag 'gmaps4rails' %>
  <%= csrf_meta_tags %>
</head>

<body>   
  <div class="container">
    <%= render :partial => 'layouts/navbar' %>
    <%= yield %>
    <%= yield :scripts %>   
  </div>
</body>
</html>

_navbar.html.erb

<!--top menu-->
<section id="top-menu">
  <div class="container">
    <div class="row">
    </div>
  </div>
</section>

<!--header-->
<header id="header">
  <div class="container">
    <div class="row header-top">
      <div class="span5 logo">
        <a class="logo-img" href="#"><img src="assets/logo.png" alt="Tabulate"></a>
        <p class="tagline">Responsive Website Template</p>
      </div>
      <div class="span7 social-container" >
        <p class="phone hidden-phone"><i class="icon-envelope"></i> info@mywebsite.com</p><p class="phone hidden-phone"><i class="icon-bell"></i> Call Us +1 800 123 45 67</p>
        <div class="top-social">
          <a data-original-title="Facebook" rel="tooltip" data-placement="top" class="facebook"
          href="#"></a>

          <a data-original-title="Twitter" rel="tooltip" data-placement="top" class="twitter2"
          href="#"></a>

          <a data-original-title="Dribble" rel="tooltip" data-placement="top" class="dribbble"
          href="#"></a>

          <a data-original-title="Digg" rel="tooltip" data-placement="top" class="digg"
          href="#"></a>

          <a data-original-title="DeviantArt" rel="tooltip" data-placement="top" class="dart"
          href="#"></a>

          <a data-original-title="Market" rel="tooltip" data-placement="top" class="market"
          href="#"></a>
        </div>
      </div>
    </div>
    <div class="row header-nav">
     <div class="span12">
      <nav id="menu" class="clearfix">
        <ul>
          <li class="current"><a href="./index.html" ><span class="name">Home</span></a>
            <ul>
              <li><a href="./index.html">Home Page 1</a></li>
              <li><a href="./index2.html">Home Page 2</a></li>
              <li><a href="./index3.html">Home Page 3</a></li>
            </ul>
          </li>
          <li><a href="./about.html"><span class="name">Features</span></a>
            <ul>
              <li><a href="./about.html">About Us</a></li>
              <li><a href="./full-width.html">Full Width</a></li>
              <li><a href="./bs-scaffolding.html">BootStrap Pages</a>
                <ul>
                  <li><a href="./bs-scaffolding.html">Scaffolding</a></li>
                  <li><a href="./bs-base-css.html">Base CSS</a></li>
                  <li><a href="./bs-components.html">Components</a></li>
                  <li><a href="./bs-javascript.html">JavaScript</a></li>
                </ul>
              </li>
              <li><a href="./font-awesome.html">FontAwesome</a></li>
              <li><a href="./price-table.html">Price Table</a></li>
              <li class="last"><a href="./404.html">404 Page not found</a></li>
            </ul>
          </li>
          <li><a href="./portfolio4.html"><span class="name">Portfolio</span></a>
            <ul>
              <li><a href="./portfolio2.html">Portfolio 2 col</a>
                <ul>
                  <li><a href="./portfolio2.html">Portfolio 2 Columns</a></li>
                  <li class="last"><a href="./portfolio2ex.html">Portfolio 2 Columns Extended</a></li>
                </ul>
              </li>
              <li><a href="./portfolio3.html">Portfolio 3 col</a>
                <ul>
                  <li><a href="./portfolio3.html">Portfolio 3 Columns</a></li>
                  <li class="last"><a href="./portfolio3ex.html">Portfolio 3 Columns Extended</a></li>
                </ul>
              </li>
              <li><a href="./portfolio4.html">Portfolio 4 col</a>
                <ul>
                  <li><a href="./portfolio4.html">Portfolio 4 Columns</a></li>
                  <li class="last"><a href="./portfolio4ex.html">Portfolio 4 Columns Extended</a></li>
                </ul>
              </li>
              <li class="last"><a href="./portfolio-single.html">Single Portfolio</a></li>
            </ul>
          </li>
          <li><a href="./blog-sidebar-right.html"><span class="name">Blogs</span></a>
            <ul>
              <li><a href="./blog-sidebar-right.html">Blog - Sidebar Right</a></li>
              <li><a href="./blog-sidebar-left.html">Blog - Sidebar Left</a></li>
              <li><a href="./blog-type-1.html">Blog Type 1</a></li>
              <li><a href="./blog-type-2.html">Blog Type 2</a></li>
              <li class="last"><a href="./blog-single.html">Blog Single</a></li>
            </ul>
          </li>
          <li><a href="./contact.html"><span class="name">Contacts</span></a></li>
        </ul>
      </nav>
      <!--<form class="top-search pull-right">-->
      <!--<input type="text" placeholder="text here..." class="span3">-->
      <!--<button type="button" class="btn"><i class="icon-search-form"></i></button>-->
      <!--</form>-->
    </div>
  </div>
</div>
</header>

Gemfile

source 'https://rubygems.org'

gem 'rails', '3.2.13'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'
gem 'gmaps4rails'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'

# To use Jbuilder templates for JSON
# gem 'jbuilder'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano'

# To use debugger
# gem 'debugger'

JS mainfest

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Answer 1

您好我发现我的问题是什么，首先我将所有javascritps和css移动到vendor / Javascripts和vendor / stylesheets，然后在application.js和application.css清单中添加这些条目。进行大量调查我已经弄清楚jquery.min.js必须先加载，所以看来jquery.min.js没有先加载，所以我只是在我的application.js mainfest上添加一个新条目和Violá!!!所有jquery动画开始工作！。

因此，如果您正在使用wrapbootstrap主题，我建议您始终确保首先加载jquery.min.js。要做到这一点，只需在application.js manifest

上添加下一行

//= require jquery
//= require jquery_ujs 
//= require_self

//= require  ../../../vendor/assets/javascripts/jquery.min.js
//= require_tree ../../../vendor/assets/javascripts

我应该如何在rails项目上安装wrapboostrap模板？

1 个答案: