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