溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
比較了下Bootstrap的popover和一些其它的開源項目，覺得Bootstrap的還算不錯。沒想到第一次就遇到了一個問題。
彈出框顯示的時候如果貼近一個列的邊沿，就會很窄，如果一個列比較寬還好，而如果遇到這樣的列比如：<div class="col-md-2">，幾乎任意位置顯示的彈出框都被擠壓了。
先看看我的實現以及效果：
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'
});
});
我們把容器設置成整個頁面的body，這樣popover就有足夠寬的地方了。
實際上在官網上對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）被擠壓的問題小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
