Ruby on Rails 3 - 使用类和simple_forms覆盖引导程序

Question

我有以下CSS类：

.table-price-item {
  vertical-align: middle;
  margin-bottom: 10px;
  font-size: 0.875em;
  padding-right: 5px;
}

以及simple_forms中的以下输入：

  <%= f.input :price, :input_html => { :class => "table-price-item" }, 
    :label => false, :as => :string, :readonly => true %>

当表单呈现时，我得到这个

<input class="string optional readonly table-price-item" ...

表价格项不会被应用，因为它被以下内容覆盖：

textarea, input[type="text"], input[type="password"], input[type="datetime"], 
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], 
input[type="week"], input[type="number"], input[type="email"], input[type="url"], 
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input 

从引导。 我怎样才能让它覆盖最后一个？

顺便说一句，表-价格-项也适用于该表单上的 select2 和其他项目。

CSS 的链接顺序：

<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />

Answer 1

终于找到了解决方案。

由于这些类在引导程序中有更详细的描述，因此它们被覆盖了。

解决此问题的一种方法是添加！important。

.table-price-item {
  vertical-align: middle !important;
  margin-bottom: 10px !important;
  font-size: 0.875em !important;
  padding-right: 5px !important;
}

然后他们确实会获得优先权并得到申请！

Answer 2

在

Bootstrap CSS 之后包含您的自定义 CSS，它将覆盖这些样式。