增加弹出框的宽度

Posted 2023-03-06

【中文标题】增加弹出框的宽度

【英文标题】：Increase the width of the popover

【发布时间】：2016-12-18 20:03:59

【问题描述】：

我试图在鼠标悬停时显示一个弹出框。 我遇到的问题是增加弹出框的大小。

这里是Plunker

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

    .popover-inner 
width: 400px;

 .popover-content 
width: 500px;

但没有帮助。

【问题讨论】：

UI Bootstrap Popover: change width的可能重复

Changing the width of Bootstrap popover的可能重复

【参考方案1】：

关于你的代码和你的问题，问题是你试图编辑一个没有正确选择器的元素 (.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

【参考方案2】：

试试这个：

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

.popover 
   width: 500px !important;
   max-width:500px !important;

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

当在样式声明中使用重要规则时，此声明会覆盖任何其他声明。

【讨论】：

每次在 css 代码中使用 !important 时。上帝杀死了一只猫。 :( 如果没有必要，请不要使用 !important。

@JoséLezama 在您不拥有 IMO 样式表的情况下，使用 !important 没有任何问题。如果是他自己的样式表，那么就不需要 !important。

其实!important正如你所说，有它自己的时间。这是真的！正如您所说，通常需要覆盖第三方 css。但在这种情况下，没有必要！正如您可以查看我建议之前的代码，或者在问题的 cmets 中建议的其他响应中查看。所以，如果你可以不使用!important，那么important 的使用是不必要的。所以，一只猫已经死了。 :(如果您愿意，可以阅读：css-tricks.com/when-using-important-is-the-right-choice@HanletEscaño