0

我正在基于这个 Gemfile 进行开发：

    source 'https://rubygems.org'

    gem 'rails', '3.2.13'
    gem 'bootstrap-sass', '2.3.1'
    gem 'sqlite3', :require => 'sqlite3'
    gem 'bcrypt-ruby', '3.0.1'
    gem 'jquery-rails', '~> 2.2.1'

    # gem for dev only
    group :development do
      gem 'annotate', '~> 2.4.1.beta'
      gem 'rspec-rails'
      gem 'capybara', '1.1.2'
      gem 'factory_girl_rails', '4.1.0'
    end

    # 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'
      gem 'uglifier', '>= 1.0.3'
    end

将此包含在我的主 Style.css.scss 文件中：

    @import "bootstrap";

我的 application.html.erb 文件中的这个标题：

    <!DOCTYPE html>
    <html>
    <head>
      <title> <%= full_title(yield(:title))%> </title>
      <%= stylesheet_link_tag    "application", :media => "all" %>
      <%= javascript_include_tag "application" %>
      <%= csrf_meta_tags %>
      <%= render "layouts/shim" %>
    </head>

    <body>
    ...

（灵感来自 Michael Hartl 的教程）

我正在尝试将 Bootstrap 中的以下示例应用于我的设计：

<div class="tabbable"> <!-- Only required for left/right tabs -->
 <ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane active" id="tab1">
   <p>I'm in Section 1.</p>
  </div>
  <div class="tab-pane" id="tab2">
   <p>Howdy, I'm in Section 2.</p>
  </div>
 </div>
</div>

效果不是预期的（即使它在他们的网站上运行良好，我复制/粘贴它）：

- 首次显示页面时，选择活动选项卡 1（如预期的那样）

- 当我点击“第 2 节”选项卡时，地址栏实际上显示 URL ...#tab2，但不显示第 2 节的内容。活动选项卡仍然是 1。

- 当我单击“第 1 节”选项卡时，地址栏实际上显示 URL ...#tab1

我错过了什么 ？

谢谢你的帮助。

此致，

弗雷德

4

2 回答 2

2

听起来 javascript 没有加载，所以您的应用程序可能没有加载它。您可能忘记设置您的应用程序以加载引导程序 .js，如下所示：

# app/assets/javascripts/applications.js (or a manifest of your choice)
//= require bootstrap
于 2013-03-18T22:50:38.860 回答
1

正如 Zaid 所说，听起来您确实没有导入引导 JS。

此外，您应该在资产组中包含 bootstrap-sass gem。如果不是，则 gem 中包含的供应商样式表和脚本将不会在 prod 部署之前进行预编译。

于 2013-03-19T00:53:58.077 回答