让 application.css 覆盖引导程序答案

【问题标题】：getting application.css to override bootstrap让 application.css 覆盖引导程序
【发布时间】：2013-05-02 11:54:03
【问题描述】：

我正在尝试自定义我的 rails 应用导航栏，并将 css 添加到 application.css。我知道 application.css 被正确引用，因为该应用程序正在从中获取其他样式。但是导航栏 css 试图覆盖 bootstrap.css 中已有的内容，而应用程序无法识别它...

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

应用程序.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;
}

我错过了什么吗？

【问题讨论】：

bootstrap.css 在哪里？什么是应用程序无法识别，引导风格还是您的风格？
application.css 和 bootstrap.css 都在 assets/stylsheets 中。它无法识别我的风格（application.css）
你的 application.css 中有指令require bootstrap 吗？如果没有，如果您依赖require_tree .，那么生成 css 的顺序可能是正确的。
谢谢，一定是订单的问题。如果我在 application.css 中添加 require bootstrap - 不幸的是没有任何变化
将您的 application.css 粘贴到问题中

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

尝试让您的 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，因为它是在在您的样式之后加载的。

【讨论】：

【解决方案2】：

当你想用你自己的风格覆盖引导程序时，你的 application.css 必须在引导程序定义之后加载。

【讨论】：

【解决方案3】：

您需要加载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 之前包含此文件。

【讨论】：