web-dev-qa-db-ja.com

！importantを使用せずにTwitterブートストラップのさまざまな入力サイズをカスタマイズするにはどうすればよいですか？

ブートストラップの入力サイズは幅だけで拡大しますが、ボタンは高さとフォントサイズの両方で拡大します。 （picを参照）入力をカスタマイズして、高さとフォントサイズも拡張しようとしています。 （注：彼らは次のバージョンのためにこれを修正していますが、私は待ちきれませんでした）

enter image description here

これまでのところ、!importantハックを使用して入力cssをオーバーライドすることによってのみこれを達成できます。 !importantの使用は避けたいと思いますが、それはひどい習慣だからです。

現在、これは.input-largeの高さを拡張するためのコードです。 !importantを削除しても機能しません。これは、入力がクラスよりも高い優先順位を与えられているためだと思います（絶対にばかげていると思いますが、間違っている場合は修正します）。

.input-large {
width: 210px;
height: 44px !important;
margin-bottom: 10px !important;
line-height: 30px !important;
padding: 11px 19px !important;
font-size: 17.5px !important;
}

デフォルトの入力スタイルを削除せずにこれを達成する方法はありますかおよび!importantを宣言しませんか？

ここにフィドルがあります： http://jsfiddle.net/xryQK/

htmlcssformstwitter-bootstrap
31
Michelle

_!important_を使用する代わりに、属性セレクターを使用できます。これは、単に使用するよりも具体的であるため、デフォルトをオーバーライドしますclass。特異性の概念が良くない？ this の記事を参照してください。

セレクターの特異性を計算するには、 this websiteを使用できます。

[1] _class[attr=class]_を使用する

_.input-large[class="input-large"] {
    width: 400px;
}
_

OR

[2] _tag[attr=class]_を使用する

_input[class="input-large"] {
    width: 400px;
}
_

そして、_!important_を使用するのは、適切な場所で使用する場合、ひどい習慣ではありません。

上記のセレクター、 [1] すべての要素widthから_400px_になり、_input-large_のclassを持ち、セレクターの場合 [2]すべてのwidthのinputが_400px_の要素であるため、classを_input-large_に設定するため、必要に応じてmultipleクラスを呼び出すことができますすなわちinputタグで_.class.class_を選択し、以下のセレクターを使用します。

_.input-large.input-large-altered {
    width: 400px;
}
_

したがって、これらのクラスの両方が設定されているany要素を選択します。より具体的にしたい場合は、_input type="text"_のみに設定します。

_input[type="text"].input-large.input-large-altered {
   width: 400px;
}
_

したがって、上記のものはonlyinput属性がtypeのvalueを保持しているtext要素をターゲットにします[〜＃〜] and [〜＃〜]両方のクラスを持つ_.input-large_ _.input-large-altered_

デモ

デモ2

デモ （複数のクラス）

31
Mr. Alien

私の知る限り、ブートストラップの後に独自のカスタマイズされたCSSを置くだけです

例：

... Some codes here ...

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<style>
.input-large {
    width: 210px;
    height: 44px;
    margin-bottom: 10px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
}
</style>

... another code ...

申し訳ありませんが、!importantを削除するのを忘れました!importantは不要です

6
gamehelp16

bootstrap .lessファイルから作業している場合

簡単な解決策は、次のような追加のエントリを追加することです。

.form-fatter {
  // Set font for forms
  label,
  input,
  button,
  select,
  textarea {
    // Increase the default with 20%
    #font > .shorthand(@baseFontSize*1.2,normal,@baseLineHeight*1.2); 
  }
}

あなたのHTMLで

<form class="form-horizontal form-fatter">
...
</form>
1
Vincent Theeten