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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
XENON基于JSON变种
Jul 27 Javascript
input按钮的事件处理大全
Dec 10 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
javascript每日必学之继承
2016/02/23 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
keras输出预测值和真实值方式
2020/06/27 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
内业资料员岗位职责
2014/01/04 职场文书
优秀班主任材料
2014/12/16 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers