如何处理冲突的库？ -Mathquill与Bootstrap
[英]How to handle conflicting libraries? - mathquill vs 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，数学将完美呈现。 这是一个小提琴 ，下面是屏幕截图：
使用Bootstrap，除了将class panel和panel-default到div#container之外，我具有相同的代码。 用户输入的数学效果不好，因为间距似乎不正确，并且不遵守span#input的边界。 这是一个小提琴 ，下面是屏幕截图：
我认为这里的问题是引导程序导致MathQuill的数学范围（在span#input ）具有更多填充，因此出现了MathQuill的问题。 有没有办法让引导程序忽略span#input内部的区域？
显然，我可以从引导程序中复制所需的样式，然后将其应用于需要样式的区域，但是考虑到我正在广泛使用它，这将很麻烦。
有什么想法吗？
5 个解决方案
解决方案1
2 2015-08-03 11:55:38
可以通过修改mathquill.css文件中的mathquill-rendered-math类进行更正。
只需添加以下内容。
.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}
解决方案2
1 2013-12-30 23:06:02
您可以使用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>
另一种方法是创建自己的自定义引导样式表。 您可以在其网站上下载 LESS源代码。
解决方案3
1 已采纳 2014-01-04 17:27:02
感谢@Tim的出色回答，但我在这里找到了更好的解决方案。 我将规则包装在我自己的类中bootstrap-enabled bootstrap的类中，以使bootstrap的样式仅适用于我想要的样式。
解决方案4
0 2014-03-20 02:39:18
为了解决这个问题，我要做的是找到它们冲突的区域，并使用我的自定义CSS覆盖这些元素的Bootstrap。
例如，由于以下原因，权力看起来很糟糕/超出了国界
sup {
top: -0.5em;
}
在Bootstrap中。 我已将CSS中的mathquill元素重置为0。
您正确地指出，Bootstrap会摆弄填充物，这会使分母回绕。 具体来说，Bootstrap使用“边框框”而不是默认的“内容框”来进行框大小调整。 设置：
.denominator {
box-sizing: content-box;
}
解决此问题。
这解决了示例中的两个问题。 当我发现更多冲突（及其来源）时，我将对其进行更新。
解决方案5
0 2014-04-19 13:07:56
我只是通过将来自此答案的 css-resetter添加到mathquill.css的开头来解决了mathquill + bootstrap冲突（将.reset-this更改为.mathquill-rendered-math * ）
如何在单个页面中处理多个 mathquill 元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.