0

我正在使用 bootstrap.js 构建一个简单的 UI。作为此 UI 的一部分，我想使用导航栏。

在导航栏上，我想在导航栏中的每个项目下都有一个弹出框。这工作正常。

然而，我注意到的是导航栏中最后一个链接项上的弹出框位置不正确。

最后一项是三分之三还是六分之六都没有关系，受影响的只是最后一项。

我可以通过不在最后一项上使用弹出框来解决此问题，但是我不明白为什么会发生这种情况。

我在本地的 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 回答