增加彈出窗口的寬度

Question

我試圖在鼠標上顯示彈出窗口。 我遇到的問題是增加popover框的大小。

這裏是Plunker

我試着調整使用CSS的寬度，如下圖所示：

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

，但沒有幫助。

Answer 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叉：https://plnkr.co/edit/p4dr2XMzQqw8R6RYOsMo?p=preview

Answer 2

試試這個：

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

這需要在!important exception的優勢，應用的樣式。

當在樣式聲明中使用重要規則時，該聲明將覆蓋任何其他聲明。