2014-11-04 40 views
0

以下是相關jsFiddle與完整的代碼示例。造型Bootstrap 3 Popovers

將鼠標懸停在Fizz菜單右側的道路圖標上,您將看到一個彈出窗口。看看popover有多狹窄?我想要:

  • 顯着擴大了popover;和
  • 風格的酥料餅不同的顏色,說:
    • 的酥料餅的「頭」一節中綠色背景(「說明:」)
    • 紅色背景的酥料餅的‘身體’部分(正文)

根據this answer,我可以拓寬經由酥料餅:

$('[data-toggle="popover"]').popover({ 
    container: 'body' 
}); 

這正是我所做的(參見jsFiddle中的JS),但是這顯然不起作用。我無法找到任何樣式來設計popover的顏色。有任何想法嗎?

+0

你可以調整的'template'酥料餅的設置(見文檔)。 – cvrebert 2014-11-04 21:31:15

回答

2

您可以將某些CSS應用於彈出窗口的類以實現此結果。

在您提供的小提琴,你可以達到你想要使用以下行「登入」元素的影響:

.signin .popover { min-width:300px; } 
.signin .popover-title { background-color:green; } 
.signin .popover-content { background-color:red; } 
+0

謝謝@Celmar(+1),不幸的是這些改變對我不起作用。你會願意更新我的jsFiddle,以防我以某種方式搞砸嗎?再次感謝! – smeeb 2014-11-04 15:54:35

+0

當然,我不得不爲一個元素添加一個id來爲字段模式popover做它。 http://jsfiddle.net/97zp5ckq/2/ – Marcelo 2014-11-04 16:15:32