javascript - 如何处理冲突的库？ - mathquill 与 bootstrap

Question

我在使用的两个库之间存在某种冲突，Bootstrap和 Mathquill .我在网站的布局、结构和整体 UI 中使用 Bootstrap ，在交互式 LaTeX 渲染中使用 Mathquill——基本上，让用户以一种漂亮的“教科书风格”格式输入数学。

我的问题是 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 ，下面是截图:

我认为这里的问题是 Bootstrap 导致 MathQuill 的数学跨度(在 span#input 内)有更多的填充，因此 MathQuill 的问题。有没有办法让 bootstrap 忽略 span#input 内的区域？

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

有什么想法吗？

Answer 1

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

只需添加以下内容。

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