在使用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. IP地址更改小工具(bat命令)

    为了方便切换IP地址,特编制bat命令代码来实现,将以下代码复制到txt文本中,然后保存为bat文件,双击bat文件运行即可. 通过bat命令运行,自动修改IP地址,代码如下: @echo off c ...

  2. 第三章 数组与字符串 UVa1588 Kickdown

    题目要求简述:给定长度分别为n1,n2(n1,n2<=100)且每列的高度只为1或者2的长条.需要将他们放入一个高度为3的容器,问能够容纳它们的最短容器长度. 分析: 对于这样的题目显而易见有两 ...

  3. PCI Express(四) - The transaction layer

    原文出处:http://www.fpga4fun.com/PCI-Express4.html 感觉没什么好翻译的,都比较简单,主要讲了TLP的帧结构 In the transaction layer, ...

  4. tomcat的乱码问题

    String filename=request.getParameter("filename"); filename=new String(filename.getBytes(&q ...

  5. maven 打包 spring 项目

    在程序中使用到了springframework控件(主要是为了使用Mybatis-spring操作数据库,省事). 使用maven管理项目的构建,现在需要生成一个jar包,包含所有依赖的jar包,并可 ...

  6. ecshop 商品页面添加商品标签:

    /* @脚垫客户 需要给商品加属性.最简单粗暴的办法.后台调用加入.界面没有美化. */ goods.dwt <ul class="quantity"> <h2& ...

  7. Unix网络编程 -- ubuntu下搭建编译环境( 解决unp.h 编译等问题)

    1.安装编译器,安装build-essential sudo apt-get install build-essential 2.下载本书的头文件 下载unpv13e  http://ishare.i ...

  8. Spring 4集成 Quartz2(转)

    本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度.Spring 为简化 Quartz 的操作提供了相关支持类.本文示例使用的相关工具如下: Spring 4.2. ...

  9. fastJson java后台转换json格式数据

    什么事JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Progra ...

  10. wpf 任务栏闪烁

    [StructLayout(LayoutKind.Sequential)] public struct FLASHWINFO { public UInt32 cbSize; public IntPtr ...