在使用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. autoit 中_GUICtrlStatusBar_SetBkColor失效的解决办法

    #include <GuiConstantsEx.au3> #include <GuiStatusBar.au3> #include <WinAPI.au3> #i ...

  2. 解决Mac下GDB提示签名错误

    http://blog.csdn.net/powerlly/article/details/30323015

  3. Spark Streaming源码解读之生成全生命周期彻底研究与思考

    本期内容 : DStream与RDD关系彻底研究 Streaming中RDD的生成彻底研究 问题的提出 : 1. RDD是怎么生成的,依靠什么生成 2.执行时是否与Spark Core上的RDD执行有 ...

  4. 关于隐藏input输入内容问题

    如果想通过获取焦点输入改变内容,type不能是hidden的 <input type="hidden" id="test"> // 这种是不行的,只 ...

  5. maximo功能修改笔记

    经过前几次的简单的修改系统功能,对maximo的bean开发已经有了一定了解,现在是耗时近两个礼拜来修改了一项系统功能,所用到的知识 Bean Fld, 下面我认真总结修改功能过程中的学到的知识: 目 ...

  6. C# 或 Asp.net 2.0 邮件发送模块(亲测)

    using System.Net.Mail;using System.Net; public class Mail    {        MailMessage mm;        SmtpCli ...

  7. mongodb固定集合,建立管理员安全验证

    建立普通集合 db.createCollections aaa; 建立固定集合名称book capped true 固定集合 size大小 max:文档数量 db.createCollection(& ...

  8. linux上安装配置vsftpd

    启动: /usr/sbin/vsftpd & 端口占用: lsof -i:21 位置: whereis vsftpd 默认配置下,匿名用户登录 vsftpd 服务后的根目录是 /var/ftp ...

  9. nginx的gzip选项和expire过期时间记录

    最近,参加了公司的组织的一个公开课,收获还是挺多的,下面来总结接一下: 一. 使用nginx来进行网页内容的压缩编码与传输速度的优化: 先来观察一下news.sina.com.cn在请求和传输的时候发 ...

  10. 循序渐进之Spring AOP(5) - 创建切面

    在掌握了可用的增强后,接下来要做的就是精确的描述切点.前面的示例都是指定一个目标类并把增强织入到所有方法中,实际开发显然会有更精细的筛选需求,比如对所有类中名称以test结尾的方法加入监控执行时间,或 ...