如何处理冲突的库？ -Mathquill与Bootstrap
[英]How to handle conflicting libraries? - mathquill vs bootstrap
问题描述
I'm having a sort of conflict between two libraries I'm using, Bootstrap and Mathquill . 
我正在使用的两个库Bootstrap和Mathquill之间存在某种冲突。 I'm using bootstrap for the layout, structure, and overall UI of the website, and Mathquill for interactive LaTeX rendering- basically, letting the user type in math in a nice, "textbook style" format. 我正在使用引导程序来表示网站的布局，结构和整体UI，并使用Mathquill进行交互式LaTeX渲染-基本上是让用户以一种不错的“教科书样式”格式输入数学运算。
My problem is that bootstrap seems to conflict with Mathquill, in the rendering of the math. 我的问题是引导程序似乎在数学渲染中与Mathquill冲突。 Here is the structure of my page: 这是我页面的结构：
HTML 的HTML
<div id="container">
<span id="input" class="mathquill-editable"></span>
</div>
CSS 的CSS
#container {
padding: 5px;
width: 80%;
}
#input {
width: 100%;
padding: 15px;
margin: 5px;
}
Without Bootstrap running, the math renders perfectly. 如果不运行Bootstrap，数学将完美呈现。 Here is a fiddle , and below is a screenshot: 这是一个小提琴 ，下面是屏幕截图：
With Bootstrap, I have the same code, except that I add the classes panel and panel-default to div#container . 使用Bootstrap，除了将class panel和panel-default到div#container之外，我具有相同的代码。 User inputted math, doesn't render well, because the spacing seems to be wrong, and it doesn't respect the boundaries of span#input . 用户输入的数学效果不好，因为间距似乎不正确，并且不遵守span#input的边界。 Here is a fiddle , and below is a screenshot: 这是一个小提琴 ，下面是屏幕截图：
I think the problem here is the bootstrap causes MathQuill's math spans (inside of span#input ) to have more padding, thus the problems with MathQuill. 我认为这里的问题是引导程序导致MathQuill的数学范围（在span#input ）具有更多填充，因此出现了MathQuill的问题。 Is there a way to let bootstrap ignore the area inside span#input ? 有没有办法让引导程序忽略span#input内部的区域？
Obviously, I could just copy the styling I need from bootstrap and just apply it to the areas I need the styling for, but this would be a hassle considering that I'm using it quite extensively. 显然，我可以从引导程序中复制所需的样式，然后将其应用于需要样式的区域，但是考虑到我正在广泛使用它，这将很麻烦。
Any thoughts? 有什么想法吗？
5 个解决方案
解决方案1
2 2015-08-03 11:55:38
This can be corrected by modifying the mathquill-rendered-math class in mathquill.css file. 可以通过修改mathquill.css文件中的mathquill-rendered-math类进行更正。
just add the following. 只需添加以下内容。
.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}
解决方案2
1 2013-12-30 23:06:02
You could use a iframe for applying the mathematical stylesheet only. 您可以使用iframe仅应用数学样式表。 I don't think it will cost too much speed to load if you're using MathQuill extensively. 如果您广泛使用MathQuill，我认为加载速度不会太高。
I would do something like this: 我会做这样的事情：
<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>
And then let math.php output something like this: 然后让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>
Another approach would be creating your own custom bootstrap stylesheet. 另一种方法是创建自己的自定义引导样式表。 You can download the LESS sourcecode on its website. 您可以在其网站上下载 LESS源代码。
解决方案3
1 已采纳 2014-01-04 17:27:02
解决方案4
0 2014-03-20 02:39:18
What I've done to solve this is find the areas where they conflict and use my custom CSS to override Bootstrap for those elements. 为了解决这个问题，我要做的是找到它们冲突的区域，并使用我的自定义CSS覆盖这些元素的Bootstrap。
For instance, the powers look bad/go beyond the border because of 例如，由于以下原因，权力看起来很糟糕/超出了国界
sup {
top: -0.5em;
}
in Bootstrap. 在Bootstrap中。 I've reset this to 0 for mathquill elements in my CSS. 我已将CSS中的mathquill元素重置为0。
You correctly point out that Bootstrap is fiddling with padding, which makes the denominator wrap around. 您正确地指出，Bootstrap会摆弄填充物，这会使分母回绕。 Specifically Bootstrap uses "border-box" rather than the default "content-box" for box-sizing. 具体来说，Bootstrap使用“边框框”而不是默认的“内容框”来进行框大小调整。 Setting: 设置：
.denominator {
box-sizing: content-box;
}
fixes this. 解决此问题。
This fixes the two problems in your example. 这解决了示例中的两个问题。 I'll update this post as I find more conflicts (and their sources). 当我发现更多冲突（及其来源）时，我将对其进行更新。
解决方案5
0 2014-04-19 13:07:56
我只是通过将来自此答案的 css-resetter添加到mathquill.css的开头来解决了mathquill + bootstrap冲突（将.reset-this更改为.mathquill-rendered-math * ）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.