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>

它给了我一个像这样的弹出窗口：

如何设置样式更改此弹出窗口的宽度？

Answer 1

从docs您可以使用

  

div属性 - 要应用于弹出窗口的自定义类

popover-class

在你的样式表中

<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设置为 276px 。

github bootstrap code

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白色容器的大小。

Answer 5

您是否尝试过popover组件的 popover-append-to-body 属性？

Answer 6

可以通过覆盖.popover：

轻松更改宽度

.popover {
    width: 200px;
}

Answer 7

<style>
    .popover {
        width: 500px;
        max-width: 500px;
    }
</style>

就我而言，这两个参数都很重要并且生效