增加弹出窗口的宽度

Question

我正在尝试在鼠标悬停时显示弹出窗口。我遇到的问题是增加弹出框的大小。

我尝试使用 css 调整宽度，如下所示：

    .popover-inner {
width: 400px;
}
 .popover-content {
width: 500px;
}

但没有帮助。

Answer 1

试试这个：

.popover-inner {
   width: 500px !important;
   max-width:500px !important;
}
.popover {
   width: 500px !important;
   max-width:500px !important;
}

这利用了 !important exception 来应用样式。

When an important rule is used on a style declaration, this declaration overrides any other declarations.

Answer 2

关于您的代码和您的问题，问题是您试图在没有正确选择器 (.popover) 的情况下编辑元素。当您尝试编辑正确的选择器时，它有一个 max-width property。所以它不起作用。但是

就够了

   .popover {
     max-width: 500px;
   }

就这些。

但我尝试了你的 plnkr，发现你在代码中使用了模态类。那是一个错误。因为它不是 css 的语法或用法。所以我添加了新的 css 类:

.popover-content > .header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5; 
}
 .popover-content > .body {
  padding: 20px;
}

并将 popover.html 更改为：

<div class="header">
   <b>How is this amount calculated?</b>
</div>
<div class="body">
  <h4>PQ * A% * CR AVG </h4>
  <br />
  PQ - Pre-Qualified based on your historical data <br />
  A% - Approval percentage <br />
  CR AVG - (Historical Credits Earned) / (Total Certificates)
</div>
http://angular-ui.github.io/bootstrap/

你可以查看我的 plnkr fork:https://plnkr.co/edit/p4dr2XMzQqw8R6RYOsMo?p=preview

增加弹出窗口的宽度

Increase the width of the popover

javascript

css

angularjs

angular-ui-bootstrap