在使用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. js实现一套代码来控制所有的运动,图片的淡入淡出,winth,height的变宽

    介绍了那么多运动,這次一套代码实现所有运动 1.html代码和css代码,只是定义一个div <style> div{ width:200px; height:200px; margin: ...

  2. vbs脚本要求在cmd中输入输出用StdIn ,StdOut

    Dim StdIn, StdOutSet StdIn = WScript.StdInSet StdOut = WScript.StdOut Do While Not StdIn.AtEndOfStre ...

  3. 用webview打开网页时,里面有个div带滚动条的,但是在平板上滚动条失效

    android2.3的不支持滚动条,并且scrollTop也不支持的.(设置overflow未hidden就可以支持). function noBarsOnTouchScreen(arg) { var ...

  4. coroSync packmarker

    CoroSync+Pacemaker实现web高可用 2015-04-12 23:38:19 标签:CoroSync pacemaker 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 ...

  5. TListView的一些操作

    1,让滚动条滚动的API SetScrollPos int SetScrollPos(     _In_  HWND hWnd,     _In_  int nBar,     _In_  int n ...

  6. PHP echo 即时输出

    header(“Content-type:text/html;charset=utf-8″); #设置执行时间不限时 set_time_limit(0); #清除并关闭缓冲,输出到浏览器之前使用这个函 ...

  7. 测试table数据 winfrom datagridview 点击标头数字排序的时候table 列类型要为数字类型

    public DataTable GenerateData(int NoOfRecord){DataTable tbl = new DataTable();tbl.Columns.Add(new Da ...

  8. 了解 XSS 攻击原理

    在了解 XSS 之前必须知道『网站登入(Session)』的原理 简单的说当会员成功登入后 网站会给浏览器一个『令牌』 之后只要拿着这个『令牌』到网站上 就会被视为已经登入 再来下面是 XSS 最简单 ...

  9. SO单号中某两项没进FP

    某张SO共60项,有两项没有进FP系统,550 560两项VC物料没有进FP 1.检查in_sales_order发现是有60行数据 2.在INODS时执行FP_SO呢个存储过程会将in_sales_ ...

  10. laravel 数据库迁移

    问题:之前有创建迁移文件 并且执行过 如果删除迁移文件 再重新创建迁移文件时就有问题 提示找不到之前的迁移文件 /** 一开始执行的命令 php artisan make:migration crea ...