增加弹出窗口的宽度

问题描述：

我试图在鼠标上显示弹出窗口。我遇到的问题是增加popover框的大小。增加弹出窗口的宽度

我试着调整使用CSS的宽度，如下图所示：

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

，但没有帮助。

[UI引导酥料饼：改变宽度]的可能的复制（ http://stackoverflow.com/questions/29005345/ui-bootstrap-popover-change-width） – 3rdthemagical

[更改Bootstrap弹出窗口宽度]的可能重复（http://stackoverflow.com/questions/19448902/changing-the -bootstrap-popover） – c0d3rman

答

关于你的代码和你的问题，问题是你试图编辑一个元素而没有正确的选择器（.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叉：https://plnkr.co/edit/p4dr2XMzQqw8R6RYOsMo?p=preview

答

试试这个：

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

这需要在!important exception的优势，应用的样式。

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

每t ime你使用！重要的CSS代码。上帝杀死一只猫。 :(请不要使用！重要的是如果没有必要的话 – joseglego

@JoséLezama在你没有拥有样式表IMO的情况下使用！重要没有错如果是他自己的样式表，那么不需要！重要的 –

事实上，'important'有你自己的时间，这是真的！正如你所说的那样，通常需要覆盖第三方的css，但在这种情况下，这是没有必要的！用我之前提出的代码，或者在问题的评论中提出的其他回答，那么，如果你可以不使用'！important'，那么'重要'是不必要的使用。所以，一只猫死了。如果你想要，你可以阅读：https://css-tricks.com/when-using-important-is-the-right-choice/ @HanletEscaño – joseglego

增加弹出窗口的宽度

相关推荐