Question

我真的不喜欢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

由于

Answer 1

这是我的解决方案：
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在加载bootstrap后使用那些冲突css声明重新呈现正文

.x-body {
   ...
}

Answer 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的其他信息。

我希望这会有所帮助。

如何让ExtJS 4.1.1搞乱Twitter Bootstrap 2.2.1布局呢？

2 个答案: