UI Bootstrap 弹出窗口：更改宽度

Question

我正在尝试在 AngularJS 中使用来自 UI Bootstrap 的弹出窗口： 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

你可以通过覆盖 popover-content class:

.popover-content {
width: 200px;
}

更新： 您可以在 Chrome 中查看： - 按 F12 - select 放大镜 - 单击要检查的元素 - 修改其样式

Answer 2

可以通过重写 .popover:

轻松更改宽度

.popover {
    width: 200px;
}

Answer 3

你试过popover组件的popover-append-to-body属性了吗？

Answer 4

对我来说，以下方法有效

.popover {
    max-width: 450px;
}

这实际上改变了弹出窗口白色容器的大小。

Answer 5

如果弹出窗口非常宽，另一种解决方案是允许它们自动调整大小

把你的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 6

从 docs 您可以使用

popover-class attribute - Custom class to be applied to the popover

<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>

你的风格sheet

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

设置max-width而不是width的原因是bootstrap将popover-max-width设置为276px。

github bootstrap code

Answer 7

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

在我的例子中，这两个参数都很重要并且都生效了

UI Bootstrap 弹出窗口：更改宽度

UI Bootstrap Popover: change width

angularjs

angular-ui-bootstrap