UI Bootstrap Popover:更改宽度

Question

我正在尝试使用AngularJS中UI Bootstrap的popovers:http://angular-ui.github.io/bootstrap/#/popover

<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

它给了我一个像这样的popover:

我怎样才能改变这个popover的宽度？

Answer 1

从文档中你可以使用

popover-class attribute - 要应用于弹出窗口的自定义类

<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

在你的样式表中

.increase-popover-width {
   max-width: 400px;
}

之所以设置max-width的,而不是width在于引导已popover-max-width设置为276px.

github引导程序代码

Answer 2

您可以通过覆盖popover-content类来实现它:

.popover-content {
width: 200px;
}

更新: 您可以在Chrome中查看: - 按F12 - 选择放大镜 - 点击要检查的元素 - 修改其样式

Answer 3

如果你有非常广泛的弹出窗口的另一个解决方案是允许它们自动调整大小

只需将你的CSS设置为这样

.popover {
    max-width: 800px; /* optional max width */
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
}

Answer 4

对我来说,以下工作

.popover {
    max-width: 450px;
}

这实际上改变了popover白色容器的大小.