造型 Bootstrap 3 弹出框

Posted 2023-03-06

【中文标题】造型 Bootstrap 3 弹出框

【英文标题】：Styling Bootstrap 3 Popovers

【发布时间】：2014-12-31 12:33:27

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

您可以调整template Popover 设置（请参阅文档）。

【参考方案1】：

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

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

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

【讨论】：

感谢@Celmar (+1)，不幸的是，这些更改对我不起作用。你愿意更新我的 jsFiddle 以防我以某种方式搞砸它吗？再次感谢！

当然，我必须为元素添加一个 id 才能为字段模式弹出框执行此操作。 jsfiddle.net/97zp5ckq/2