如何處理沖突的庫？ -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.