Question

我正在尝试决定工具提示或弹出窗口..或根据需要使用两者。这是问题所在。

我的网站上有一个自举式固定导航栏。该网站为白色，导航栏为深蓝色。

当使用工具提示时，它覆盖在导航栏上并且略微不透明，我真的不在乎。使用弹出框时，它没有不透明度，但隐藏在顶部导航栏后面。

所以我想如果我想同时使用这两个问题，这是一个双重问题。如何取消工具提示的不透明度并使弹出窗口悬停在顶部栏上。选择使用两者都是理想的。

Answer 1

使用一些CSS可以解决这两个变化。我建议您不要直接修改Twitter Bootstrap CSS，而是链接到不同的样式表。确保在包含Bootstrap样式表之后包含此新样式表，以便它覆盖Bootstrap CSS。在撰写本文时，最新版本的Bootstrap是2.1.1，所以所有评论都基于这个假设。

对于工具提示

工具提示的效果在第5003行的.tooltip.in规则中定义如下：

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

要删除效果，请在新样式表中插入以下内容：

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

对于Popover

在网络上，由于较低的z-index，一个对象被置于另一个对象之下。弹出窗口的z-index在第5080行中定义如下：

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

但是，在此版本的Bootstrap中，默认（静态）导航栏没有显式的z-index集，因此它默认为0.因此，弹出框应该已经在导航栏上。如果您使用的是较旧版本的Bootstrap，则可以通过查找导航栏的z-index并将弹出窗口的z-index设置为更高的数字来解决此问题。您可以通过将以下代码添加到新样式表来实现：

.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更高。

希望这有帮助。

Answer 3

您可以使用此 CSS 覆盖默认设置

render

Twitter Bootstrap工具提示和popover不透明度和叠加

3 个答案: