让application.css覆盖引导 [英] getting application.css to override bootstrap

问题描述

我想自定义我的rails应用程序导航栏，并添加了css到application.css。我知道application.css正在被正确引用，因为应用程序正在拾取其他样式。但是导航栏css试图覆盖已经在bootstrap.css中，并且应用程序不能识别它...

application.html.erb（layout）

 <％= stylesheet_link_tagapplication，：media => all％> 
<％= javascript_include_tagapplication％> 
<％= analytics_init如果Rails.env.production？ ％> 
< link href =../ assets / bootstrap-responsive.css =stylesheet> 
  

application.css

  body {
 padding-top：20px; 
 padding-bottom：60px; 
} 
 
 / *自定义容器* / 
 .container {
 margin：0 auto; 
 max-width：1000px; 
} 
 .container> hr {
 margin：0px 0; 
} 
 
 / *主营销信息和注册按钮* / 
。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; 
} 
 
 / *支持营销内容* / 
 .marketing {
 margin：60px 0; 
} 
 .marketing p + h4 {
 margin-top：28px; 
} 
 
 
 / *自定义navbar链接以填充.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; 
} 
  

我错过了什么？

p>

在您的应用程式/ assets / stylesheets / application.css中：

  * 
 *这是一个将编译成application.css的清单文件，它将包括下面列出的所有文件
 *。 
 * 
 *此目录中的任何CSS和SCSS文件，lib / assets / stylesheets，vendor / assets / stylesheets，
 *或插件的vendor / assets / stylesheets这里使用相对路径引用。 
 * 
 *您可以向此文件中添加应用程序范围的样式，它们将显示在
 *编译文件的顶部，但通常最好创建一个新文件每个样式范围。 
 * 
 * = require_self 
 * = require bootstrap 
 * = require bootstrap_responsive 
 * = require my_styles 
 * / 
  
 
 
在您的应用程序/ assets / stylesheets / my_styles.css中放置您现在在application.css中的自定义css。
 
 
 
这样你的自定义样式将在所有引导程序之后加载，覆盖它。
 
 
 
说实话，我认为这是现在发生了什么：它不是bootstrap.css什么是重写你的样式，它是bootstrap_responsive，因为之后加载你的样式。
 
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...

application.html.erb (layout)
<%= 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
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?
解决方案
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.

In your 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.

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 after your styles.

                        
这篇关于让application.css覆盖引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！