Bootstrap-sass在Rails App中不起作用

时间:2013-12-24 21:10:48

标签: css ruby-on-rails sass twitter-bootstrap-3 bootstrap-sass

我正在尝试为gem应用程序做贡献,该应用程序在gemfile中有以下内容:

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" />

3 个答案:

答案 0 :(得分:4)

你的问题是你的gemfile定义了:bootstrap 2.3.2.2,你正在使用bootstrap 3.0.0的语法。 注意说明符〜&gt;具有特殊含义,最好通过示例显示:〜&gt; 2.3.2.2与&gt; = 2.3.2.2相同且&lt; 2.4(more info here)。

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

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

答案 1 :(得分:3)

你导入了bootstrap mixins吗?您需要将@import "bootstrap/theme";添加到application.css.scss文件

以下是文档该部分的link

另外,您是否尝试过bootstrap-sass-rails gem?

答案 2 :(得分:0)

第1步:包含gem'bootstrap-sass','〜&gt; 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运行服务器