Bootstrap彈出框（Popover）被擠壓的問題小結(jié)
比較了下Bootstrap的popover和一些其它的開源項目，覺得Bootstrap的還算不錯。沒想到第一次就遇到了一個問題。
彈出框顯示的時候如果貼近一個列的邊沿，就會很窄，如果一個列比較寬還好，而如果遇到這樣的列比如：<div class="col-md-2">，幾乎任意位置顯示的彈出框都被擠壓了。
先看看我的實現(xiàn)以及效果：
js：
$(function (){
$("[data-toggle='popover']").popover({
trigger: 'hover'
});
});
html：
<div class="col-md-1"> ... <img src="..." width="50" height="50" data-toggle="popover" data-content='...' title="..." /> ... </div>
效果
不過解決起來很簡單，只需在初始化的時候添加一個container屬性就可以了：
$(function (){
$("[data-toggle='popover']").popover({
trigger: 'hover',
container: 'body'
});
});
我們把容器設(shè)置成整個頁面的body，這樣popover就有足夠?qū)挼牡胤搅恕?/p>
實際上在官網(wǎng)上對container的作用是有說明的地址 ，只是沒有注意到：
Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
以上所述是小編給大家介紹的Bootstrap彈出框（Popover）被擠壓的問題小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
用JavaScript調(diào)用WebService的示例
JavaScript用htc實現(xiàn)WebService的調(diào)用2008-04-04
echarts使用中關(guān)于y坐標(biāo)軸無法正常顯示的問題解決記錄
Echarts是由百度提供的數(shù)據(jù)可視化解決方案,下面這篇文章主要給大家介紹了關(guān)于echarts使用中關(guān)于y坐標(biāo)軸無法正常顯示的問題解決記錄,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了javascript Array 數(shù)組常用方法 ,需要的朋友可以參考下2015-04-04
zTree插件之單選下拉菜單實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JS判斷鼠標(biāo)進(jìn)入容器的方向與window.open新窗口被攔截的問題
這篇文章主要給大家介紹了利用Javascript判斷鼠標(biāo)進(jìn)入容器方向的方法，以及window.open新窗口被攔截的問題分析，文中給出了詳細(xì)圖文介紹和示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，下面來一起看看吧。2016-12-12
js獲取iframe中的window對象的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲得iframe中的window對象的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
由于TypeScrip中的類不支持多繼承，所以引入了混合（Mixin）的特性，可以間接實現(xiàn)多繼承的效果，這篇文章主要介紹了一文弄懂TypeScript中的混合（Mixin）,需要的朋友可以參考下2023-09-09
最常見的方式是使用js函數(shù)操作excle文件，這種方式可能因瀏覽器不同，存在兼容性問題。另一種簡單方法就是導(dǎo)出一個excel能識別格式的xml文件，用excel打開。2013-07-07
這篇文章主要介紹了javascript自定義回調(diào)函數(shù)，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章給大家整理了動態(tài)JavaScript所造成的一些大家可能不知道的危害，文章介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09