造型 Bootstrap 3 弹出框

Question

这里是相关的jsFiddle 以及完整的代码示例。

将鼠标悬停在 Fizz 菜单右侧的道路图标上，您会看到一个弹出框。看看弹出框有多窄？我想：

• 显着扩大弹出框；和
• 为弹出框设置不同颜色的样式，例如：
  • 弹出窗口的“标题”部分中的绿色背景（“说明：”）
  • 弹出框的“正文”部分（正文）中的红色背景

根据this answer，我可以通过以下方式扩大弹出框：

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

这正是我所做的（参见 jsFiddle 中的 JS），但这显然行不通。而且我找不到任何可以为弹出框颜色设置样式的东西。有什么想法吗？

Answer 1

您可以将一些 CSS 应用于弹出框的类以实现此结果。

在您提供的小提琴中，您可以使用以下几行来实现“signin”元素所需的效果：

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