Question

我正在使用的两个库Bootstrap和Mathquill之间存在某种冲突。我正在使用bootstrap作为网站的布局，结构和整体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，下面是截图： without bootstrap

使用Bootstrap，我有相同的代码，只是我将类panel和panel-default添加到div#container。用户输入的数学，不能很好地渲染，因为间距似乎是错误的，并且它不尊重span#input的边界。这是fiddle，下面是截图： with 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;}

Answer 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>

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

Answer 3

感谢@Tim提供了很好的答案，但我找到了更好的解决方案here。我将把规则包装在我自己的类bootstrap-enabled中，这样bootstrap的样式只适用于我想要的地方。

Answer 4

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

例如，由于

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

sup {
    top: -0.5em;
}

在Bootstrap中。我已经将我的CSS中的mathquill元素重置为0。

你正确地指出Bootstrap正在摆弄填充，这使得分母环绕。具体来说，Bootstrap使用“border-box”而不是默认的“content-box”来进行大小调整。设定：

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

解决了这个问题。

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

Answer 5

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

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

5 个答案: