让application.css覆盖bootstrap
我正在尝试自定义我的rails应用程序导航栏并将css添加到application.css。 我知道application.css正在被正确引用，因为应用程序正在从中获取其他样式。 但导航栏css试图覆盖bootstrap.css中已有的内容，而应用程序无法识别它…
application.html.erb（布局）
"all" %> 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; }
我错过了什么吗？
尝试让您的application.css仅用于“需求”目的，它将为您跟踪错误以及利用Rails3资产管道堆栈铺平道路。
在你的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 */
在你的app / assets / stylesheets / my_styles.css中，将你现在拥有的自定义css放在application.css中。
这样你的自定义样式将在所有引导程序之后加载，覆盖它。
说实话，我认为这就是你现在正在发生的事情：它不是bootstrap.css什么是覆盖你的风格，它是bootstrap_responsive，因为它是你的风格后加载。
如果要使用自己的样式覆盖引导程序，则必须在引导程序定义后加载application.css。
您需要加载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
然后在rails布局中包含application.css之前包含此文件。