Question

我正在基于这个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部分”标签时，地址栏实际显示了网址...＃tab1

我错过了什么？

感谢您的帮助。

致以最诚挚的问候，

佛瑞德

Answer 1

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

# app/assets/javascripts/applications.js (or a manifest of your choice)
//= require bootstrap

Answer 2

正如Zaid所说，听起来你没有导入引导程序JS。

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

Bootstrap tabbable nav不显示Ruby on Rails中的预期选项卡

2 个答案: