Bootstrap弹出框(Popover)被挤压的问题小结


Posted in Javascript onJuly 11, 2017

比较了下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>

效果

Bootstrap弹出框(Popover)被挤压的问题小结

不过解决起来很简单,只需在初始化的时候添加一个container属性就可以了:

$(function (){
 $("[data-toggle='popover']").popover({
  trigger: 'hover',
 container: 'body'
 });
});

我们把容器设置成整个页面的body,这样popover就有足够宽的地方了。

Bootstrap弹出框(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)被挤压的问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 #Javascript
underscore之function_动力节点Java学院整理
Jul 11 #Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 #Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 #Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 #Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 #Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php处理json时中文问题的解决方法
2011/04/12 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
脚本收藏iframe
2006/07/21 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python 自动重连wifi windows的方法
2018/12/18 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
免职通知
2015/04/23 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL