javascript - CQ5 中的 UI 受到干扰？

Question

我正在从事 CQ 5.5 元素。对于 UI，我使用了 Bootstrap CSS 2.3.2(我没有使用最新的 Bootstrap ，因为它不支持使用 DataTables——具有搜索选项卡和分页支持的表格)。每当我在 CQ 中使用 Bootstrap 时，侧踢的 UI 都会受到干扰

此外，当我启用富文本编辑器的所有功能、拖动它并单击“源代码编辑”时，我无法编辑数据 注意:富文本编辑器是在Modal(下拉)上拖动的。

我遇到过很多这样的故障。为什么会这样？发生这种情况是否是因为 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其中包含您可能感兴趣的解决方案。