1

我有以下 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" ...

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

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

顺便说一句，table-price-item 也适用于 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" />
4

2 回答 2

4

终于找到了解决办法。

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

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

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

然后他们会获得优先权并被申请！

于 2013-01-25T00:16:14.793 回答
0

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

于 2013-01-23T00:27:32.197 回答