6

我真的不喜欢 ExtJS，但我不得不使用它。我想将 Twitter Bootstrap 2.2.1 用于主布局，将 ExtJS 用于网格和 JS（策略）。

我有一个很棒的 Bootstrap 设计，但是在我加载 ExtJS 的那一刻，导航栏、字体等都被淹没了。

有没有一种方法可以让两者一起工作而无需进入 ExtJS 和调整大量的 CSS？

我正在使用的 CSS 文件位于以下路径中（对于 ExtJS）：

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

谢谢

4

2 回答 2

3

这是我的解决方案：
1.使用 ext-all-scoped.css 而不是 ext-all.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 回答