如果我将所有引导样式仅应用于特定的 div，则模式不起作用答案

【问题标题】：If I apply all bootstrap styling to only a particular div, modals are not working如果我将所有引导样式仅应用于特定的 div，则模式不起作用
【发布时间】：2012-11-22 04:23:25
【问题描述】：

所以我尝试在自定义 SharePoint 应用程序页面上使用引导样式（顺便说一句，这很棒）。为此，我修改了 bootstrap.less 文件，在所有选择器前面加上我选择的 id。基本上，我遵循了这篇文章的建议：Prefixing all selectors for twitter bootstrap in less。

这很好用...引导样式仅应用于具有我选择的 ID 的容器 div。但是，当我这样做时，我注意到模态停止工作。我通过切换回原始 bootstrap.css 文件对此进行了测试。模态再次正常工作。我不能使用默认的 bootstrap.css 文件，因为它弄乱了页面其余部分的一些 SharePoint 样式。在所有引导样式元素上使用自定义前缀选择器时，我需要做什么才能使模式正常工作？

【问题讨论】：

考虑更改 CSS 文件导入的顺序，以赋予旧样式表更多的权限来发挥自己的作用。还要确保编译你的 less css。

标签： twitter-bootstrap less

【解决方案1】：

想通了。在 bootstrap-modal.js 文件中，背景属性的回调默认附加到文档正文。由于我添加了一个自定义前缀来应用所有引导样式，因此我必须将其更改为附加到具有该类的父 div。修复如下所示。

原始 bootstrap-modal.js：

  this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .appendTo(document.body)

我的修复（我的自定义选择器是“.bootstrap”）：

  this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .appendTo($('.bootstrap')[0])

【讨论】：