2011-12-27 56 views
9

在這個小提琴http://jsfiddle.net/mjmitche/qVdEy/6/上,你可以看到彈出框內的文字對齊是完美的,但是當我在我的網站上放置完全相同的css/js/html時,文本比容器大!如何調試popover?

enter image description here

我試圖弄清楚什麼是使用螢火蟲發生的事情,但我必須將我的光標從酥料餅的使用螢火蟲,然後螢火蟲消失。我無法弄清楚我的代碼中的哪些設置正在改變演示文稿。彈出窗口是使用Twitter Bootstrap.js創建的(你可以看到小提琴中的資源)

+3

您無疑將自己的CSS與Bootstrap混合在一起。你自己的CSS然後打破引導,這真的很簡單。 – 2011-12-27 02:25:54

+0

你使用的是什麼版本的Firefox,我沒有在Firefox或Chrome上得到相同的問題 – Gautam 2011-12-27 02:26:47

+0

我認爲你誤解了這個quatsion。 jsfiddle上的彈出窗口非常完美(在我的瀏覽器和你的瀏覽器中),但是在我的本地站點(只有我可以看到),無論瀏覽什麼內容,它都已損壞。您無法在本地網站上看到該代碼。 – Leahcim 2011-12-27 02:26:51

回答

2

看到popover CSS後,好像沒有明確定義的字體大小:http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css(只需在「酥料餅」,並通過CSS看看)

也許嘗試添加以下的CSS,並從那裏調整它:

.popover, .popover h3.title, .popover .content { font-size: 14px; } 

希望幫助:)

+0

這回答了潛在的問題。供參考,初始問題的答案見John的答案在下面。 – retrovertigo 2017-11-13 02:54:33

4

我要做的就是那種怪異,似乎只在Chrome中工作,而不是螢火蟲。 的步驟是:

  1. 在新窗口中打開Chrome檢查
  2. 讓檢查人員的肯定部分是上層建築你 試圖激活(在後臺窗口的按鈕的
  3. 激活瀏覽器窗口並將鼠標懸停在按鈕上(這將激活彈出窗口),現在點擊 alt + tab(OSX上的cmd +`)切換到檢查器窗口
  4. 這不會觸發mouseOut事件並保留彈出窗口 附加到DOM body節點!因爲你是alrea dy在檢查員 中,您可以導航到它並查看css問題。
+1

這種有點爲我工作,但只要我在步驟3後移動我的鼠標即使它不再是活動窗口實際上觸發了鼠標懸停事件:(但它確實出現在控制檯之前,但我可以沒有看到元素,因爲我不能在Chrome Inspector中看到它,然後它就會消失 – FireDragon 2013-03-23 01:00:07

27

沒有人真正回答這個問題:「如何調試酥料餅」 :::只需設置酥料餅對負載打開>>$('#element').popover('show')

+2

這應該是被接受的答案,前提是問題是詢問如何調試。 – Tariqulazam 2016-02-10 22:00:05

+1

正是我所期待的,您也可以在「監視」面板中添加該命令 – guilleva 2016-04-08 17:45:51

+0

此外,在Firefox DevTools中,您可以在Inspector中選擇觸發元素,右鍵單擊「在控制檯中使用」並執行諸如$(temp0).popover('show')之類的操作。 ' – retrovertigo 2017-11-13 02:56:32