twitter-bootstrap 让 application.css 覆盖引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16437497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting application.css to override bootstrap
提问by tessad
I'm trying to customise my rails app navbar and have added the css to application.css. I know that application.css is being correctly referenced, because the app is picking up other styling from it. But the navbar css is trying to override what is already in bootstrap.css, and the app is not recognising it...
我正在尝试自定义我的 rails 应用程序导航栏，并将 css 添加到 application.css。我知道 application.css 被正确引用，因为应用程序正在从中获取其他样式。但是导航栏 css 试图覆盖 bootstrap.css 中已有的内容，而应用程序无法识别它...
application.html.erb (layout)
application.html.erb（布局）
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= analytics_init if Rails.env.production? %>
<link href="../assets/bootstrap-responsive.css" rel="stylesheet">
application.css
应用程序.css
body {
padding-top: 20px;
padding-bottom: 60px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
margin: 0px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 20px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Am I missing out something?
我错过了什么吗？
回答by Galen
Try to let your application.css just for 'require' purposes, it will pave your way to track errors as well as take advantage of Rails3 assets pipeline stack.
尝试让您的 application.css 仅用于“要求”目的，它将为您跟踪错误以及利用 Rails3 资产管道堆栈铺平道路。
In your app/assets/stylesheets/application.css:
在你的 app/assets/stylesheets/application.css 中：
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require bootstrap
*= require bootstrap_responsive
*= require my_styles
*/
In your app/assets/stylesheets/my_styles.css put the custom css that you have now in application.css.
在您的 app/assets/stylesheets/my_styles.css 中，将您现在拥有的自定义 css 放在 application.css 中。
That way your custom styles will be loaded after all the bootstrap stuff, overriding it.
这样你的自定义样式将在所有引导程序之后加载，覆盖它。
To be honest I think that this is what is happening to you right now: it is not bootstrap.css what is overriding your styles, it is bootstrap_responsive as it is loaded afteryour styles.
老实说，我认为这就是您现在正在发生的事情：覆盖您的样式的不是 bootstrap.css，而是 bootstrap_responsive，因为它是在您的样式之后加载的。
回答by Hexodus
When you want to override bootstrap with your own style, then your application.css must be loaded after bootstrap definition.
当你想用你自己的风格覆盖 bootstrap 时，你的 application.css 必须在 bootstrap 定义之后加载。
回答by pungoyal
You need to load bootstrap.cssand bootstrap-responsive.cssand then override your styles. One way is to define a new bootstrap_and_overrides.css.scsslike so:
您需要加载bootstrap.css和bootstrap-responsive.css，然后覆盖您的样式。一种方法是bootstrap_and_overrides.css.scss像这样定义一个新的：
@import "bootstrap";
@import "bootstrap-responsive";
.well {
box-shadow: 0 0 4px #888888;
border-radius: 0px 0px 0px 0px;
}
// more overrrides
Then include this file before you include application.cssin your rails layout.
然后在包含application.css在 Rails 布局中之前包含此文件。
