UI Bootstrap Popover：更改宽度答案

【问题标题】：UI Bootstrap Popover: change widthUI Bootstrap Popover：更改宽度
【发布时间】：2015-05-14 08:21:07
【问题描述】：

我正在尝试在 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>

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

我怎样才能改变这个弹出框的宽度？

【问题讨论】：

angular-ui 引导指令具有指令绑定变量 "uib-tooltip-classes" ，传递给 uib-tooltip-classes 的类名将在打开时附加到您的弹出父容器。

标签： angularjs angular-ui-bootstrap

【解决方案1】：

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

.popover-content {
width: 200px;
}

更新： 您可以在 Chrome 中查看： - 按 F12 - 选择放大镜 - 单击要检查的元素 - 修改其风格

【讨论】：

根据我的经验，当您在 devtools 中更改此属性时，它会正确更改。但是，当它在与我的 Angular 项目关联的 .css 文件中发生更改时，更改将被忽略。

【解决方案2】：

通过覆盖.popover可以轻松更改宽度：

.popover {
    width: 200px;
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

对我来说，以下工作

.popover {
    max-width: 450px;
}

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

【讨论】：

【解决方案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 */
}

【讨论】：

【解决方案6】：

从docs你可以使用

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的原因是bootstrap将popover-max-width设置为276px。

github bootstrap code

【讨论】：

popover-class 对我不起作用，但我有非常旧的 bootsrap ui 版本（0.12.1），这就是原因。我应该将它更新到至少 0.13.0，因为此版本中的文档状态 popover-class 受到尊重：https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md
更何况 bootstrap ui 0.13.x 需要 angular 1.3.x

【解决方案7】：

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

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

【讨论】：