Bootstrap中popover位置调整和使用实例

最新推荐文章于 2025-11-22 16:37:35 发布

原创最新推荐文章于 2025-11-22 16:37:35 发布 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #css

前端相关专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap Popover插件创建弹出框，并详细解释如何通过CSS和属性设置，使弹出框准确地显示在所需位置。特别关注解决删除按钮下拉菜单中弹出框定位问题。

部署运行你感兴趣的模型镜像

弹出框插件的简单教程：Bootstrap 弹出框（Popover）插件 | 菜鸟教程

现有一个表格，表格每一行有button，希望点击删除的button后出现弹出框询问是否删除，先上效果图：

bootstrap popover插件本身提供了placement选项，可以对弹出框的显示位置进行选择，我这里选的bottom：

placement

string|function
默认值：top

data-placement

规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

弹出框内容设置为：

<li><a th:href="'javascript:void(0);'" class="pop" title="确认删除该代理？" th:onclick="'javascript:saveId(\''+${agent.id}+'\')'"
data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="manual"
data-content="<button type='button' class='btn btn-danger'
onclick='deleteRequest()'>确定</button>
<button type='button' class='btn btn-default'>取消</button>">删除</a></li>

因为我的删除按钮是在下拉菜单中，我遇到的问题是，点击删除后，弹出框总是出现在删除按钮下方，希望能够指在【更多】按钮上，百度出来的结果是可以css设置.popover覆盖bootstrap的默认样式，例：如何修改BootStrap popover的默认样式？（代码）-js教程-PHP中文网

我尝试设置了.popover

.popover{
    top: -10px !important;
    background: red;
}

top不加 !important的话是无效的，但加了之后发现这是相对于<body>的布局，不是相对于触发它的按钮。

最终发现了可以设置另一个属性

.popover.bottom {
    margin-top: -50px;
}

弹出框顺利相对于删除按钮上移，指向更多按钮。

Tip：

我这里displacement选的是buttom，所以设置 .bottom，如果是其他比如left，相应的应该设置 .popover.left

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言