在使用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()
})

 

版权声明：本文为eoff原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/eoff/p/5099624.html