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

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

来自bootstrap。我怎样才能覆盖最后一个？

顺便说一下，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" />

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，它将覆盖这些样式。

用class和simple_forms覆盖bootstrap

2 个答案: