在使用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工具提示的使用问题的更多相关文章

  1. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  2. stylus css tooltips 工具提示

    tooltips 纯css工具提示 bubbles-tooltips 查看效果 演示 安装 npm install tooltips --save 使用 在 gulp 中使用 gulp var gul ...

  3. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  4. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  5. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  6. bootstrap中table的colspan不起作用

    bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...

  7. Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...

  8. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?

    bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...

随机推荐

  1. lisp 题目

    1.根据二叉树的中序,前序生成生成二叉树的后续 2.BFPRT算法

  2. 【MySQL】MySQL 5.7+ 版本的初始化

    MySQL 5.7.7以上二进制包就不包括原data目录的初始化系统表,官网说明: http://dev.mysql.com/doc/refman/5.7/en/data-directory-init ...

  3. 网站搭建 so easy

    服务器(国际购买):http://www.gigsgigscloud.com/ 域名(阿里云): 解析到服务器       服务器需要安装 1.putty 2.CuteFTP(自己感觉这个靠谱点) / ...

  4. Java运算符的优先级(从高到低)

    运算符的优先级(从高到低) 优先级 描述 运算符 1 括号 ().[] 2 正负号 +.- 3 自增自减,非 ++.--.! 4 乘除,取余 *./.% 5 加减 +.- 6 移位运算 << ...

  5. Attribute "resource" must be declared for element type "mapper".

    今天在玩mybatis的时候,遇到这个奇葩问题. 最后发现,原因是 dtd文件配置错误了.错把Mapper的直接copy过来 把DOCTYPE mapper改成configuration,Mapper ...

  6. 127.0.0.1和localhost完全相等吗?

    今天在使用ajax发请求的时候遇到如下问题: 以[Access-Control-Allow-Origin]为关键字搜索的结果进行改进,但没有效果. 返回仔细查看错误提示,发现ajax请求的url是lo ...

  7. TJI读书笔记09-访问控制权限

    TJI读书笔记09-访问控制权限 包,package和import 权限修饰符 接口和实现 类的访问权限控制 首先问一个问题,为什么要有访问控制权限? 安全,这当然是一个很重要的原因. 让类库的使用者 ...

  8. avalon2学习教程13组件使用

    avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...

  9. 【Django】Django model与数据库操作对应关系(转)

    Django对数据库的操作分用到三个类:Manager.QuerySet.Model. Manager的主要功能定义表级方法(表级方法就是影响一条或多条记录的方法),我们可以以models.Manag ...

  10. bind的用处

    刚做的项目,遇到过这样的问题,就是在动态追加标签时,给追加的标签添加事件时,在标签内追加不了,后来使用了delegate代理,能响应了,但也是不能给动态追加的代理 $("body" ...