Bootstrap tabbable和popover之間的衝突

我正在嘗試在同一頁面中使用Twitter Bootstrap tabbable和Bootstrap popovers。我在解決彈出問題時遇到了困難，這個彈出問題不能超出製表符的範圍（問題在於彈出窗口出現在邊界旁邊，它是半隱藏的）。Bootstrap tabbable和popover之間的衝突

我不是JQuery方面的專家，但據我所知，問題來自標籤在「iframes」中創建，並且popovers無法從其「iframe」中顯示出來。

有什麼辦法可以解決這個問題嗎？（=即使靠近標籤的邊框，也能正確顯示popover）

非常感謝！

下面是說明（在html的http://jsfiddle.net/7PU2D/準備複製/粘貼），我的問題示例代碼：

<!DOCTYPE html> 
<head> 
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> 
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
</head> 
<body> 
<div class="span2"> 
    Left column 
</div> 
<div class="span6"> 
    <div class="tabbable"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li> 
      <li><a href="#tab2" data-toggle="tab">tab2</a></li> 
      <li><a href="#tab3" data-toggle="tab">tab3</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div id="tab1" class="tab-pane active">tab1 text 
       <div class="well"> 
        <a href="#" class="btn btn-danger" rel="popover" style="position: relative;" data-content="And here's some amazing content. It's very engaging. right? " data-original-title="A Title">hover for popover</a> 
       </div> 
      </div> 
      <div id="tab2" class="tab-pane">tab2 text</div> 
      <div id="tab3" class="tab-pane">tab3 taxt</div> 
     </div> 
    </div> 
</div> 

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
<script> 
$(function(){ 
    $('a[rel=popover]').popover({ 
     trigger: 'hover', 
     placement: 'in bottom', 
     animate: true, 
     delay: 500, 
}); 
}); 
</script> 
</body>

來源

2012-07-05 sebastien.worms

標籤內容div有CSS屬性overflow設置爲auto（通過引導）。這意味着當內容的大小超過div的大小時，瀏覽器會添加一個滾動條並剪輯內容。你可以，或者僅僅通過使用內嵌樣式像這樣覆蓋的財產，以它在自己的CSS文件中的一個默認（visible）：

<div class="tab-content" style="overflow: visible;">

例子：http://jsfiddle.net/grc4/BXmC3/

來源

2012-07-05 11:41:05 grc

如果調整大小，當容器邊距較小時，部分消息將被隱藏。爲了避免這種情況，我寧願使用'placement'，'in right'，''而不是'placement'，'在底部'。 – baptme 2012-07-05 12:09:34

grc：非常感謝，這正是我一直在尋找的！baptme：我實際上使用（在真實應用程序中）可以在選項卡內容中的任何位置的內容，因此難以通過在特定方向上設置彈出窗口來避免該問題（例如：如果我設置了「in正確「，當彈出的文本接近右邊框時會出現問題）。 – 2012-07-06 17:51:40

-1

而不是$使用jQuery它可以解決您的衝突。我認爲你必須增加標籤內容的高度這樣

.tab-content 
{ 
    height:400px; 
}

來源

2012-07-05 11:30:49 muthu

MUTHU：就像我說的對baptme來說，我無法用這種方式來避免這個問題，因爲標籤內容應該被填充到真實應用中。無論如何感謝你的貢獻。 – 2012-07-06 17:56:03

使用「容器」選項。這樣你就可以追加酥料餅/尖到body元素，它不會得到由接頭窗格溢出剁掉：隱藏...例如：

<script> 
$(function(){ 
    $('a[rel=popover]').popover({ 
    trigger: 'hover', 
    placement: 'in bottom', 
    animate: true, 
    delay: 500, 
    container: 'body' 
    }); 
}); 
</script>

或：

<a rel="popover" data-container="body">Pop Me Open</a>

你的提示仍然會正確放置在鏈接旁邊，但是由於它現在已附加到body標籤，因此它不會被選項卡窗格「半隱藏」。

看到提示的文檔上引導網站/酥料餅...

2.3.2：

http://getbootstrap.com/2.3.2/javascript.html#popovers

或3.0

http://getbootstrap.com/javascript/#popovers

來源

2013-08-20 19:08:10

Bootstrap tabbable和popover之間的衝突

回答

相關問題