0

シンプルな UI を構築するために bootstrap.js を使用しています。この UI の一部として、ナビゲーション バーを使用したいと考えています。

ナビゲーション バーでは、ナビゲーション バーの各項目の下にポップオーバーを表示したいと考えています。これは正常に動作します。

ただし、ナビゲーション バーの最後のリンク アイテムのポップオーバーが正しく配置されていないことに気付きました。

最後の項目が 3 つのうちの 3 番目であろうと、6 つのうちの 6 番目であろうと、影響を受けるのは最後の項目だけです。

最後のアイテムでポップオーバーを使用しないことでこれを回避できますが、なぜこれが発生しているのかわかりません。

これを Chrome 28 と Firefox 21 でローカルにテストしましたが、結果は同じでした。

私の質問は、以下のコードの最後のポップオーバーが奇妙なレンダリングの問題を引き起こすのはなぜですか?

良い例 (カーソルが中央のリンクの上にある): カーソルが中央のリンクの上にある

厄介な例 (カーソルが最後のリンクの上に置かれている): ポップオーバーでのレンダリングが正しくない

この動作を再現するために使用しているコード:

<HTML>
<HEAD><link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen"></HEAD>
<BODY>
<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li><a href="#" id="l1" rel="popover">ABCDEFG</a></li>
      <li><a href="#" id="l2" rel="popover">ABCDEFG</a></li>
      <li><a href="#" id="l3" rel="popover">ABCDEFG</a></li>      
     </ul>  
  </div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http:///netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script>
$(function ()  
{ 
    var globalDelay = { show: 200, hide: 100 };
    var lcontent = "ABCDEFG ABCDEFG ABCDEFG";
    var ltitle = "ABCDEFG ABCDEFG ABCDEFG";
    $("#l1").popover({placement:'bottom', trigger:'hover', content:lcontent ,title:ltitle, delay:globalDelay}); 
    $("#l2").popover({placement:'bottom', trigger:'hover', content:lcontent ,title:ltitle, delay:globalDelay}); 
    $("#l3").popover({placement:'bottom', trigger:'hover', content:lcontent ,title:ltitle, delay:globalDelay}); 
});  
</script> 
</BODY>
</HTML>
4

1 に答える 1

0

リスト項目を含むオブジェクトの幅に関連しているようです。

上記のコード (以下に示す) を少し変更すると、動作を回避できます。ブートストラップによってレンダリングされる ul オブジェクトの幅により、最終的なポップオーバーが短く切り刻まれ、ナビゲーションバーのリスト項目に対しても矢印 div オフセットが発生するようです。

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav" style="width:100%;">
      <li><a href="#" id="l1" rel="popover">ABCDEFG</a></li>
      <li><a href="#" id="l2" rel="popover">ABCDEFG</a></li>
      <li><a href="#" id="l3" rel="popover">ABCDEFG</a></li>      
     </ul>  
  </div>
</div>
于 2013-07-25T12:40:44.440 に答える