bootstrap中的Tooltips工具提示的使用问题
在使用bootstrap中的Tooltips时,官方文档中的实例代码若直接放在.container 或 .container-fluid类中时,四个button悬停之后会把button之间的margin去掉,代码如下:
<div class="container-fluid">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
表现如下图:


解决办法,不要使用.container 或 .container-fluid类包裹,可以用其他任意class都不会出现此问题。
同时,使用此功能时需要初始化:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
bootstrap中的Tooltips工具提示的使用问题的更多相关文章
- 第二百四十五节,Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...
- stylus css tooltips 工具提示
tooltips 纯css工具提示 bubbles-tooltips 查看效果 演示 安装 npm install tooltips --save 使用 在 gulp 中使用 gulp var gul ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- bootstrap中table的colspan不起作用
bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...
- Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?
bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...
随机推荐
- c# webform网站图片另存代码
好辛苦生成了二维码,然后要实现点击“保存图片”,弹出选择路径进行保存的效果. look: string qrcodeurl = ""; string username = &quo ...
- Hadoop伪分布式配置:CentOS6.5(64)+JDK1.7+hadoop2.7.2
java环境配置 修改环境变量 export JAVA_HOME=/usr/java/jdk1.7.0_79 export PATH=$PATH:$JAVA_HOME/bin export CLASS ...
- vbs脚本总结
1. msgbox语法:msgbox "对话框","对话框标题" 例:const hw="Hello World!" msgbox(hw) ...
- PL/SQL连接64位Oracle配置方法
问题原因: plsql developer无法连接64位oracle server的原因是,plsql是32位的,没有64位的版本,而oracle是64位,两者不兼容. 配置方法: 1.下载64位Or ...
- jquery事件合集
1.在input输入数据时执行的事件(边输入边触发事件) $("input[id='subjectNum']").bind('input propertychange', func ...
- tomcat的乱码问题
String filename=request.getParameter("filename"); filename=new String(filename.getBytes(&q ...
- CSS3基础 02(2D /3D)
一.2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:translat ...
- .NET高级工程师面试题之SQL篇
1 题目 这确实是一个真实的面试题,琢磨一下吧!知识不用,就会丢掉,我太依赖各种框架和dll了,已经忘记了最基本的东西.有多久没有写过SQL了,我已经不记得了. 已知表信息如下: Department ...
- DropDownList怎样动态绑定数据库中的某一条数据
用Ajax动态绑定数据库的数据:点击后台查看代码,编写代码如下 if (!IsPostBack) { using (SnailTechDataContext con = new SnailTechDa ...
- jQuery设置和获取以及修改class name值操作
在Web程序开发中.很多时候会用需要修改Html标签的class名称.来达到修改标签样式的效果.那么在代码中一般是怎么操作的呢.本文将为你详细讲解一下class的使用.在jQuery中可以使用attr ...