bootstrap中的Tooltips工具提示的使用问题
bootstrap中的Tooltips工具提示的使用问题
kirin
发布于 2021-01-20 10:07:01
发布于 2021-01-20 10:07:01
代码可运行
运行总次数：0
代码可运行
在使用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()
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/01/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
