如何处理冲突的库？ - mathquill vs bootstrap答案

【问题标题】：How to handle conflicting libraries? - mathquill vs bootstrap如何处理冲突的库？ - mathquill vs bootstrap
【发布时间】：2015-08-03 19:55:38
【问题描述】：

我正在使用的两个库Bootstrap 和Mathquill 之间存在某种冲突。我将引导程序用于网站的布局、结构和整体 UI，并使用 Mathquill 进行交互式 LaTeX 渲染——基本上，让用户以一种不错的“教科书式”格式输入数学。

我的问题是，在数学渲染中，bootstrap 似乎与 Mathquill 冲突。这是我的页面结构：

HTML

<div id="container">
  <span id="input" class="mathquill-editable"></span>

</div>

CSS

#container {
    padding: 5px;
    width: 80%;
}
#input {
    width: 100%;
    padding: 15px;
    margin: 5px;
}

如果不运行 Bootstrap，数学会完美呈现。这是fiddle，下面是截图：

使用 Bootstrap，我有相同的代码，除了我将类 panel 和 panel-default 添加到 div#container。用户输入的数学，渲染不好，因为间距似乎是错误的，并且不尊重span#input 的边界。这是fiddle，下面是截图：

我认为这里的问题是引导程序导致 MathQuill 的数学跨度（span#input 内部）有更多填充，因此 MathQuill 存在问题。有没有办法让引导程序忽略span#input 内的区域？

显然，我可以从 bootstrap 复制我需要的样式并将其应用到我需要样式的区域，但考虑到我正在广泛使用它，这会很麻烦。

有什么想法吗？

【问题讨论】：

难道只是bootstrap应用了另一种字体吗？
@angabriel 是的，bootstrap 确实应用了它自己的字体，但 mathquill 的字体 Symbola 似乎在使用和不使用 bootstrap 时都能正确显示。

标签： javascript html css twitter-bootstrap libraries

【解决方案1】：

这可以通过修改 mathquill.css 文件中的 mathquill-rendered-math 类来纠正。

只需添加以下内容。

.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}

【讨论】：

【解决方案2】：

您可以使用iframe 仅应用数学样式表。如果您广泛使用 MathQuill，我认为加载速度不会太高。

我会这样做：

<html>
    <head>
        <link href="bootstrap.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <iframe src="math.php#f=2*2"></iframe>
        <iframe src="math.php#f=3*5"></iframe>
    </body>
</html>

然后让math.php 输出如下内容：

<html>
    <head>
        <link href="mathquill.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <script>
            // Generate content dynamically with JavaScript from parameter `f` so the this page can be cached.
        </script>
    </body>
</html>

另一种方法是创建您自己的自定义引导样式表。您可以在其网站上downloadLESS 源代码。

【讨论】：

请详细说明-我不确定您所说的“仅使用 iframe 应用数学样式表”和“创建自己的自定义引导样式表”是什么意思。您能否提供更具体的信息，也许是一个示例或一些我应该查看的文档链接？
感谢您的澄清！ iframe 方法是一种非常有趣的方法，但我遇到的问题是我无法控制后端，因此在这种情况下它不会真正起作用。此外，这是行不通的，因为当用户键入时，mathquill 会以交互方式呈现数学（参见 [他们的网站](mathquill.com) 的演示）。至于第二种方法，我认为如果我找不到更好的解决方案，我可能不得不使用它。这听起来像是大量的工作，几乎没有回报，但这可能是我唯一的选择。无论如何，再次感谢您提供的示例。
好吧，我不确定iframe 解决方案是否行不通。但我肯定会避免它，只是因为它不打算以这种方式工作。此外，如果您需要后端，它可能会出现性能问题（我认为 MathQuill 是一个纯 js/css/html 解决方案？）。我建议您创建自定义引导样式表，原因如下：这可能是您解决此问题的唯一方法，您将需要以一种或另一种方式对其进行自定义，因为您无法使用整个 250kb 的引导文件用于生产环境，实在是太大了。
第二条评论，因为它太长了 所以我认为你应该只生成你需要的部分 (getbootstrap.com/customize) 并手动用 @987654329 之类的前缀替换名称约定@。如果您使用 LESS 源文件，则工作量会减少。这也将是一个很好的学习经验，深入到 bootstrap 的源代码中，如果你想改变某些部分，你可能需要它。祝你好运！

【解决方案3】：

感谢@Tim 的出色回答，但我找到了更好的解决方案here。我会将规则封装在我自己的类 bootstrap-enabled 中，以便引导程序的样式只适用于我想要它们的地方。

【讨论】：

太棒了！我相信这会对很多其他人有所帮助。

【解决方案4】：

我为解决这个问题所做的是找到它们冲突的区域并使用我的自定义 CSS 来覆盖这些元素的 Bootstrap。

例如，由于

，权力看起来很糟糕/超出了边界

sup {
    top: -0.5em;
}

在引导程序中。我已将 CSS 中的 mathquill 元素重置为 0。

您正确地指出，Bootstrap 正在摆弄填充，这使得分母环绕。具体来说，Bootstrap 使用“边框框”而不是默认的“内容框”来调整框大小。设置：

.denominator {
    box-sizing: content-box;
}

解决了这个问题。

这解决了您示例中的两个问题。当我发现更多冲突（及其来源）时，我会更新这篇文章。

【讨论】：

【解决方案5】：

我刚刚通过将 this answer 中的 css-resetter 添加到 mathquill.css 的开头（将 .reset-this 更改为 .mathquill-rendered-math *）解决了 mathquill + bootstrap 冲突

【讨论】：