6

私は ExtJS が本当に好きではありませんが、使用せざるを得ません。メインのレイアウトには Twitter Bootstrap 2.2.1 を、グリッドと JS (ポリシー) には ExtJS を使用したいと考えています。

私は見栄えのする Bootstrap デザインを進めていますが、ExtJS をロードするとすぐに、ナビゲーション バー、フォントなどがすべて停止します。

ExtJS に入ったり大量の CSS を微調整したりせずに、この 2 つを連携させる方法はありますか?

私が使用している CSS ファイルは次のパスにあります (ExtJS の場合)。

js/extjs/4.1.1/resources/css/ext-all-gray.css

ありがとう

4

2 に答える 2

3

これが私の解決策です:
1. ext-all.css の代わりに ext-all-scoped.css を使用
します 2. ext-all.js をロードする前に次のコードを追加します

<script type='text/javascript'>
Ext = {
    buildSettings:{
        "scopeResetCSS": true
    }
};
</script>
<script type='text/javascript' src='http://xxx.com/extjs/ext-all.js'></script>

3. ext-all-scoped.css 内の次の宣言を削除して、ブートストラップがロードされた後に extjs がこれらの競合する css 宣言を使用して本体を再レンダリングしないようにします。

.x-body {
   ...
}
于 2013-02-23T18:16:28.960 に答える
2

問題はそのルール

.x-border-box .x-reset,.x-border-box .x-reset * {box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;}

すべてのページ要素、および Twitter Bootstrap 入力 (FF、Chrome でテスト済み) にも何らかの形で適用されています。したがって、単に提供する必要があります

box-sizing:content-box !important;
-moz-box-sizing:content-box !important; /* Firefox */
-webkit-box-sizing:content-box !important; /* Safari */

すべての Twitter 入力用。box-sizingに関する追加情報。

これが役立つことを願っています。

于 2012-11-28T14:48:56.420 に答える