Bootstrap彈出框（Popover）被擠壓的問(wèn)題小結(jié)
比較了下Bootstrap的popover和一些其它的開(kāi)源項(xiàng)目，覺(jué)得Bootstrap的還算不錯(cuò)。沒(méi)想到第一次就遇到了一個(gè)問(wèn)題。
彈出框顯示的時(shí)候如果貼近一個(gè)列的邊沿，就會(huì)很窄，如果一個(gè)列比較寬還好，而如果遇到這樣的列比如：<div class="col-md-2">，幾乎任意位置顯示的彈出框都被擠壓了。
先看看我的實(shí)現(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>
效果
不過(guò)解決起來(lái)很簡(jiǎn)單，只需在初始化的時(shí)候添加一個(gè)container屬性就可以了：
$(function (){
$("[data-toggle='popover']").popover({
trigger: 'hover',
container: 'body'
});
});
我們把容器設(shè)置成整個(gè)頁(yè)面的body，這樣popover就有足夠?qū)挼牡胤搅恕?/p>
實(shí)際上在官網(wǎng)上對(duì)container的作用是有說(shuō)明的地址 ，只是沒(méi)有注意到：
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）被擠壓的問(wèn)題小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子
今天小編就為大家分享一篇layui-table獲得當(dāng)前行的上/下一行數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
如何遍歷DOM對(duì)象內(nèi)的元素屬性，例如要獲取一個(gè)id為btn的按鈕的所有屬性該怎么實(shí)現(xiàn)呢？下面有個(gè)不錯(cuò)的教程，大家可以參考下2014-02-02
JS實(shí)現(xiàn)的簡(jiǎn)單tab切換功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單tab切換功能,結(jié)合完整實(shí)例形式分析了javascript基于事件響應(yīng)實(shí)現(xiàn)頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能
這篇文章主要介紹了JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要給大家介紹了關(guān)于JavaScript三元表達(dá)式的相關(guān)資料,三元運(yùn)算符是JavaScript僅有的使用三個(gè)操作數(shù)的運(yùn)算符,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
詳解ES6 Fetch API HTTP請(qǐng)求實(shí)用指南
本次將介紹如何使用Fetch API（ES6 +）對(duì)REST API的 HTTP請(qǐng)求，還有一些示例提供給大家便于大家理解。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了微信小程序使用wxParse解析html的方法,結(jié)合實(shí)例形式詳細(xì)分析了wxParse的下載、導(dǎo)入及具體使用技巧,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)具備延時(shí)功能的滑動(dòng)門(mén)菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)具備延時(shí)功能的滑動(dòng)門(mén)菜單效果,涉及JavaScript基于鼠標(biāo)事件與時(shí)間函數(shù)實(shí)現(xiàn)頁(yè)面樣式延遲變換功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
微信小程序開(kāi)發(fā)之你可能沒(méi)有踩過(guò)的神坑總結(jié)
最近在做一個(gè)小程序的項(xiàng)目,所以記錄下開(kāi)發(fā)過(guò)程中遇到的坑,這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)之你可能沒(méi)有踩過(guò)的神坑,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了js表單登陸驗(yàn)證的方法,基于thinkPHP前端頁(yè)面實(shí)現(xiàn)javascript針對(duì)表單用戶名與密碼的驗(yàn)證功能,需要的朋友可以參考下2016-10-10