css - 造型 Bootstrap 3 弹出框

Question

这是带有完整代码示例的相关jsFiddle 。

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

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

根据这个答案，我可以通过以下方式扩大弹出窗口：

$('[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; }