0

ブートストラップを使用していますが、小さなボタンで競合する結果が得られるページがあります。

次のようなボタンがいくつかあります。

<input type="button" class="btn btn-small" value="Save"... />

メイン フォームと、jQuery ダイアログに使用される div があります。メインフォームではボタンが小さく表示されていますが、ダイアログではボタンが通常のサイズで表示されてい<input type="button"ますclass="btn btn-small". 唯一の違いは、それらを含む div であるため、ボタンの上のどこかに適用されたスタイルに関係があると推測しています。

Firebug で「計算済み」スタイルを見ると、.btn適用されていることが示されて.btn-smallいますが、検査したすべてのプロパティに線があり、両方がリストされており、使用されていないことを示しています。

ここに画像の説明を入力

小さいボタンの行の高さは 15px ですが、通常サイズの行の高さは 20px です。本当に奇妙なのは、小さなボタンの行の高さの計算されたプロパティが 15 ピクセルと表示されているにもかかわらず、それを拡大してどこから来たのかを確認すると、20 ピクセルの.btn値が適用されて表示されることです (画像を参照)。

ボタンの行の高さプロパティ

肝心なのは、何が原因なのか本当にわからないということです。それを取り巻く多くのdivの1つにあるスタイルだと思います。私の主な質問は明らかにこれをどのように修正するかですが、より一般的なレベルでは、.btn-smallスタイルが使用されない原因は何ですか?

4

2 に答える 2

0

HTML 要素は、class 属性にクラスをリストすることで複数のクラスを割り当てることができます。クラスを区切るために空白スペースを使用しますが、同じプロパティが両方のルールで宣言されている場合、競合は最初に具体性によって解決され、次に CSS の順序に従って解決されます。宣言。class 属性内のクラスの順序は関係ありません。[mozilla の一般的な CSS の質問からの言い換え]

同じ属性を変更する 2 つのクラスがあるため、ブラウザーは正しく 1 つだけを適用します。

于 2013-07-09T17:31:02.827 に答える
-1

問題を追跡できました。jQuery-UI を使用して jsFiddle で再現できなかったため、最初は jQuery-UI の相互作用を除外しました。私が言及しなかったが関連性があることが判明したのは、Infragistics Ignite ツールセットも使用しているということです。Ignite は jQuery-UI に基づいています。ダイアログは .ui-widget クラスを取得していました (私はボタンのクラスに焦点を当てていました)。これにより、ignite がボタンのフォント サイズを設定し、Bootstrap のサイズ設定が壊れていました。

この問題を修正するために、インフラジスティックの .css ファイルから次の行を削除しました。

.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:"Segoe UI",Arial,sans-serif;font-size:1em}

関連するすべての情報を提供できなくて申し訳ありません。そのページでインフラジスティックスのものを直接使用していなかったので、インフラジスティックスが考えられる原因であるとは考えていませんでした。

于 2013-07-09T19:17:16.143 に答える