比較了下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）被擠壓的問題小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！