javascript - 如何处理冲突的库？ -Mathquill与Bootstrap

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

我的问题是引导程序似乎在数学渲染中与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内部的区域？

显然，我可以从引导程序中复制所需的样式，然后将其应用于需要样式的区域，但是考虑到我正在广泛使用它，这将很麻烦。

有什么想法吗？

最佳答案

可以通过修改mathquill.css文件中的mathquill-rendered-math类进行更正。

只需添加以下内容。

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

关于javascript - 如何处理冲突的库？ -Mathquill与Bootstrap，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20848972/