10

ナビゲーションバー内に、ポップオーバー機能を備えたヘルプボタンがあります。

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <div class="nav pull-right">
               <div class="cb_inline_block">               
                   <a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>

Javascript：

$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };

function show_timezone_help(event){
    event.preventDefault();
    $('.timezone_help').popover('show');
}

しかし、それをクリックすると、ポップオーバーはナビゲーションバーの後ろに隠れます。

本当にz-indexを手動で設定する必要がありますか？それは苦痛だろう。本当に私は何か間違ったことをしているに違いありません。ありがとう。

ここに画像の説明を入力してください

4

4 に答える 4

19

まず、あなたの質問に対する答えは、ポップオーバーは固定ナビゲーションバーで使用することを意図していないということです。variables.lessには、次のz-indexのリストがあります。

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

ご覧のとおり、ポップオーバーは固定ナビゲーションバーの下に滑り込むことを目的としています。ただし、ツールチップには表示されないことに気付くでしょう。またtrigger: 'click'、ツールチップにも使用できます。

そうしないと、ポップオーバーに行き詰まった場合、手動でそのz-indexを変更する必要があります。以下はそれをアクティブにし、それのz-indexを恒久的に変更するので、それが表示されるたびにそれを行うことを心配する必要はありません。

$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);​​​​​​​​​​​​​​​​​​​​​​​​

JSFiddle

次に、私の例が機能しているように見えたのに、あなたの例は機能しなかった理由についての説明です。

2つの例（mmfanslerJSFiddleとhoumieJSFiddle）の重要な違いは、実際には2.1.0と2.1.1の違いではありませんでした。それらの両方はz-index: 1030、固定ナビゲーションバーとz-index: 1010ポップオーバー用にあります（これはあなたの不満です）。

違いの本当のポイントは、私の2.1.0の例でもレスポンシブコードをロードしていることです。何らかの理由で、BootstrapCDNは命名規則を変更しました。

  • 2.1.0のbootstrap.min.cssは結合バージョンでした
  • 2.1.1のbootstrap.min.cssは、応答しない場合のみ

私の時点では、このbootstrap-combined.min.cssも応答しないだけなので、これは間違いだと思います。

とにかく、ポップオーバーの表示に影響を与える2つの違いは次のとおりです。

.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

ただし、このルールは特定のメディアクエリにのみ適用されます（もちろん、レンダリングのビューポートが小さいため、JSFiddleではアクティブになります）。

それ以外の場合、ナビゲーションバーが静的でない場合は、ナビゲーションバーの下にポップオーバーが表示され続けます。

BootstrapCDN Issue＃41に注目してください。

于 2012-09-09T17:25:13.223 に答える
1

私の場合、次のように決めました。

.navbar-fixed-top {
  z-index:1061;
}

ポップオーバーのデフォルトはインデックス1060であるため、1060を超えるものはすべてポップオーバーの上に配置されます。

間違った英語で申し訳ありませんが、私はブラジル人で、Google翻訳を使用しています

于 2017-01-09T11:46:10.963 に答える
0

これらのプロパティを設定します。

data-container="body" style="z-index:1000; position:relative"

z-indexは最大制限である必要があります。

于 2015-12-19T03:31:09.540 に答える
0

私の場合、ポップオーバーのコンテナをbodyとz-indexに設定する必要がありました

$().popover({container: 'body'})
于 2019-07-03T12:22:39.620 に答える