Bootstrap-sass 在 Rails 应用程序中不起作用答案

【问题标题】：Bootstrap-sass not working within Rails AppBootstrap-sass 在 Rails 应用程序中不起作用
【发布时间】：2014-01-13 01:03:06
【问题描述】：

我正在尝试为一个在 gemfile 中包含以下内容的 rails 应用程序做出贡献：

gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'sass-rails',   '>= 3.2'

除了列之外，我的布局中似乎一切正常：

<div class="col-md-6"> 对其包装的内容没有任何影响。

但是，如果我添加这一行：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

对于我的<head>，<div class="col-md-6"> 可以完美运行，但其他几个引导类不起作用，特别是在我现有的 navbar 周围。

不包括下面这行怎么才能得到上面div类的效果呢？

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

【问题讨论】：

【解决方案1】：

第 1 步：包含 gem 'bootstrap-sass', '~> 3.3.6' 并运行包更新

第 2 步：在 application.js 文件中包含 //= require bootstrap-sprockets

第 3 步：在 css 文件中：确保文件具有 .scss 扩展名（或 .sass 用于 Sass 语法）。如果您刚刚生成了一个新的 Rails 应用程序，它可能会附带一个 .css 文件。如果这个文件存在，它将被提供而不是 Sass，所以重命名它：

**app/assets/stylesheets/application.css app/assets/stylesheets/application.scss**

并从中删除所有行并包含

@import "bootstrap";

第 4 步：rails 运行服务器

【讨论】：

【解决方案2】：

您的问题是您的 gemfile 定义：bootstrap 2.3.2.2，并且您使用的是 bootstrap 3.0.0 的语法。请注意，说明符 ~> 具有特殊含义，最好通过示例来说明：~> 2.3.2.2 等同于 >= 2.3.2.2 和 more info here)。

CSS 会覆盖在最新行“之前”编写的任何内容，因此当您在布局中添加链接时，bootstrap 3.0.0 的 CSS 会覆盖资产管道中的任何内容。在您的网络应用程序中继续工作的所有内容在这些版本之间根本没有改变，停止工作的所有内容都发生了变化。

您可以使用boostrap 2.3.2 refences guide 中的语法获得所需的内容。您将在脚手架链接下找到默认的网格系统。

【讨论】：

【解决方案3】：

您是否导入了 bootstrap mixin？您需要将 @import "bootstrap/theme"; 添加到您的 application.css.scss 文件中

这是文档该部分的link。

另外，您是否尝试过使用 bootstrap-sass-rails gem 代替？

【讨论】：

感谢您的提示 - 我已将 @import "bootstrap"; 添加到我的 application.css.scss 文件中，并且引导组件似乎在其他任何地方都可以使用。我刚刚创建了这个布局并复制了另一个文件的确切布局，我知道这是可行的，但是在上面添加 div class 时它不起作用。就像我的应用程序使用的 bootstrap 的任何版本都不允许该类，但是当我放入 link href 标记时它可以。