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

最後に解決策を見つけました。

クラスはブートストラップでより詳細に説明されているため、オーバーライドされました。

これを解決する 1 つの方法は、!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 に答える