13

ツールチップまたはポップオーバーを決定しようとしています..または必要に応じて両方を使用します。これが問題です。

私のサイトにはブートストラップトップ固定ナビゲーションバーがあります。サイトは白で、ナビゲーションバーは濃い青です。

ツールチップを使用すると、ナビゲーション バーの上にオーバーレイされ、わずかに不透明になりますが、これはあまり気にしません。ポップオーバーを使用する場合、不透明度はありませんが、上部のナビゲーション バーの後ろに隠れます。

したがって、両方を使用したい場合、これは二重の質問だと思います。ツールチップの不透明度を取り除き、ポップオーバーをトップバーの上に置くにはどうすればよいですか。両方を使用するオプションがあると理想的です。

4

3 に答える 3

34

これらの変更は両方とも、少しの 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);
}

ポップオーバー用

Web では、Z インデックスが低いため、あるオブジェクトが別のオブジェクトの下に配置されます。popover の 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: ###;
}
于 2012-10-22T22:13:49.707 に答える
2

これは、使用しているブートストラップのバージョンによって異なりますが、不透明度はbootstrap.cssファイルに設定されます。（私はv2.0.1を見ています）

ファイルで確認できる唯一の不透明度設定は、bootstrap.css2963 行にあります。

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

したがって、不透明度の値をより適切なものに変更できます。

ナビゲーションバーの下のフローティングに関しては、これはナビゲーションバーにz-index相対的であるためです。ポップオーバーのz-indexは 2857 行目に設定されています。

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

z-indexしたがって、静的ナビゲーションバーに使用されるよりも高い値に変更できます。

お役に立てれば。

于 2012-10-22T21:48:51.500 に答える