CQ5中的用户界面不安？

Question

我正在研究CQ 5.5项目。对于UI，我使用了Bootstrap CSS 2.3.2（我没有使用最新的bootstrap，因为它不支持使用DataTables-一个具有搜索选项卡和分页支持的表）。 每当我在CQ中使用bootstrap时，侧踢的UI都会受到干扰

当我启用富文本编辑器的所有功能时，拖动它并点击＆＃34;源代码编辑＆＃34;我无法编辑数据 注意：富文本编辑器在模态（下拉）上拖动。

我遇到过很多这样的故障。为什么会这样？这是否发生是因为parsys，head.jsp或Global导入了自己的CSS和CSS冲突的类？关于如何解决这个问题的任何建议？

Answer 1

是。这是因为bootstrap中的CSS定义与CQ的默认样式定义冲突。

虽然CQ已经将其样式定义为仅出现在带有id CQ的内容中，但另一方面，bootstrap已为该元素定义了它。

例如，考虑到在您发布的图像中未正确显示的组件的标签，CQ为元素提供类名并定义样式如下

#CQ .x-form-item label.x-form-item-label {
    // css definition
}

而bootstrap已为标签定义了样式，如下所示

label {
    display: block;
    margin-bottom: 5px;
}

因此两种风格都适用于破坏布局的同一元素。

您可能需要稍微修改一下bootstrap CSS。有similar question有你可能感兴趣的解决方案。