Bootstrap-sass在Rails App中不起作用
[英]Bootstrap-sass not working within Rails App
问题描述
I am attempting to contribute to a rails app which has the following in the gemfile: 
我试图贡献一个rails应用程序，它在gemfile中有以下内容：
gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'sass-rails', '>= 3.2'
It seems like everything works correctly in my layouts with the exception of columns: 似乎所有内容在我的布局中都可以正常工作，但以下各列除外：
<div class="col-md-6"> has no effect whatsoever on the content that it wraps. <div class="col-md-6">对它包装的内容没有任何影响。
However, if I add this line: 但是，如果我添加以下行：
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
To my <head> , the <div class="col-md-6"> works perfectly but several other bootstrap classes don't work, specifically around the navbar I have in place. 对于我的<head> ， <div class="col-md-6">可以完美地工作，但是其他几个引导程序类不起作用，特别是在我已安装的navbar 。
How can I get the effect of the above div class without including the following line? 如何在不包含以下行的情况下获得上述div类的效果？
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
3 个解决方案
解决方案1
4 已采纳 2013-12-25 12:27:07
Your problem is that your gemfile defines: bootstrap 2.3.2.2, and you are using syntax for bootstrap 3.0.0. 您的问题是您的gemfile定义了：bootstrap 2.3.2.2，并且您正在为bootstrap 3.0.0使用语法。 Note that the specifier ~> has a special meaning, best shown by example: ~> 2.3.2.2 is identical to >= 2.3.2.2 and < 2.4 ( more info here ). 请注意，指定符〜>具有特殊含义，以示例最佳显示：〜> 2.3.2.2等于> = 2.3.2.2和<2.4（ 此处有更多信息 ）。
CSS overrides anything that was written "before" the latest lines, so when you add the link in your layout, the CSS for bootstrap 3.0.0 overrides anything in your assets pipeline. CSS会覆盖在“最新行”之前编写的任何内容，因此当您在布局中添加链接时，bootstrap 3.0.0的CSS将覆盖资产管道中的任何内容。 Everything that continues working in your web app was simply not changed between these versions, everything that stops working was changed. 在这两个版本之间，Web应用程序中可以继续运行的所有内容都没有更改，而停止工作的所有内容均已更改。
You can get what you want by using the syntax from the boostrap 2.3.2 refences guide . 您可以使用boostrap 2.3.2参考指南中的语法来获得所需的内容 。 You will find the default grid system under the scaffolding link. 您将在scaffolding链接下找到默认网格系统。
解决方案2
3 2013-12-24 21:48:40
Did you import the bootstrap mixins? 您是否导入了bootstrap mixins？ You'd need to add @import "bootstrap/theme"; 你需要添加@import "bootstrap/theme"; to your application.css.scss file 到您的application.css.scss文件
Here's a link to that section of the docs. 这是指向该部分文档的链接 。
Also, have you tried the bootstrap-sass-rails gem instead? 另外，您是否尝试过bootstrap-sass-rails gem？
解决方案3
0 2017-09-12 08:14:51
Step 1: include gem 'bootstrap-sass', '~> 3.3.6' and run bundle update 第1步：包含gem'bootstrap-sass'，'〜> 3.3.6'并运行bundle update
Step 2: in application.js file include //= require bootstrap-sprockets 步骤2：在application.js文件中包含//= require bootstrap-sprockets
Step 3: in css file : Make sure the file has .scss extension (or .sass for Sass syntax). 第3步：在css文件中：确保文件具有.scss扩展名（或.sass用于Sass语法）。 If you have just generated a new Rails app, it may come with a .css file instead. 如果您刚刚生成了一个新的Rails应用程序，它可能会附带一个.css文件。 If this file exists, it will be served instead of Sass, so rename it: 如果此文件存在，则将提供该文件而不是Sass，因此将其重命名为：
**app/assets/stylesheets/application.css app/assets/stylesheets/application.scss**
and remove all the lines from that and include 并从中删除所有行并包含
@import "bootstrap";
Step 4:rails run server 步骤4：Rails运行服务器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.