Twitter Bootstrap工具提示和彈出窗口的不透明度和覆蓋

Question

我想確定工具提示或彈出窗口..或使用兩者根據需要。 這是問題。

我在我的網站上有一個引導頂部固定的導航欄。該網站是白色的，導航欄是深藍色。

當使用工具提示時，它覆蓋在導航欄上，並且對它有輕微的不透明性，我真的不關心它。 使用彈出窗口時，它沒有不透明，但隱藏在頂部導航欄後面。

所以我想這是一個雙重問題，如果我想使用兩個。如何消除工具提示的不透明度，並將彈出窗口懸停在頂欄上。選擇使用兩者都是理想的選擇。

Answer 1

這兩個改變都可以用一點CSS來解決。我建議你不要直接修改Twitter Bootstrap CSS，而是鏈接到不同的樣式表。確保在包含Bootstrap樣式表後包含這個新樣式表，以便覆蓋Bootstrap CSS。在撰寫本文時，Bootstrap的最新版本是2.1.1，因此所有評論都基於這一假設。

工具提示

工具提示的效果在.tooltip.in規則定義上線5003，如下所示：

.tooltip.in { 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
} 

要刪除的效果，在您的新樣式表插入以下：

.tooltip.in { 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 

對於酥料餅

在Web上，由於z索引較低，一個對象被置於另一個對象之下。酥料餅的z索引在線路5080被定義如下：

.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1010; 
    ... 
} 

在這個版本中引導的，但是，默認值（靜態）導航欄，不具有明確的z索引集，因此它默認爲0.既然如此，彈出窗口應該已經在導航欄上。如果您使用的是舊版本的Bootstrap，則可以通過查找導航欄的z索引並將彈出窗口的z索引設置爲更高的數字來解決此問題。您可以通過將下面的代碼添加到新的樣式表中來實現這一點：

.popover { 
    z-index: ###; 
} 

Answer 2

這取決於你使用哪個引導的版本，但不透明度將在bootstrap.css文件中設置。 （我看V2.0.1）

唯一的不透明度設置，我可以在bootstrap.css文件看到的是上線2963：

.tooltip.in { 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
} 

因此，你可以改變不透明度值，以任何適合更好。

至於在導航欄下方浮動，這將歸因於它相對於導航欄的z-index。該酥料餅的z-index設置上線2857：

.modal-open .popover { 
    z-index: 2060; 
} 

所以，你可以改變一個z-index高於用於靜態導航欄。

希望這會有所幫助。