31

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

ここに画像の説明を入力

これまでのところ、!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/

4

3 に答える 3

31

!importantを使用する代わりに、単純にclass. 特異性の概念が苦手ですか？この記事を参照してください。

セレクターの特異性を計算するには、このWeb サイトを使用できます。

[1]使い方class[attr=class]

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

また

[2]使い方tag[attr=class]

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

そして!important、適切な場所で使用すれば、使用はひどい習慣ではありません。

上記のセレクター[1]はすべての要素 widthをofに設定し、セレクター [2] の場合はすべての要素にof400pxを設定することに注意してください。下のセレクター。classinput-largewidth400pxinputclassinput-large.class.classinput

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

したがって、これにより、これらのクラスの両方が設定されている要素が選択されます。より具体的にしたい場合、およびinput type="text"次のようなより具体的なセレクターを常に記述できるよりものみに設定したい場合

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

したがって、上記のものは、両方のクラスを持つANDを持つ属性を持つ要素のみをターゲットにします。inputtypevaluetext .input-large .input-large-altered

デモ

デモ 2

デモ 3 (複数のクラス)

于 2012-12-24T14:38:41.177 に答える
6

私の知る限り、ブートストラップの後に独自のカスタマイズされた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 The !importantis not neededを削除するのを忘れていました

于 2012-12-24T14:44:53.480 に答える
1

ブートストラップ .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>
于 2013-07-22T08:18:03.647 に答える