Bootstrap 3对话框触发确认组件后按钮间距异常消失问题咨询

云原生阿岚

2026-5-22

解决Bootstrap Confirmation对话框按钮间距丢失问题

嘿，我之前也碰到过这个小坑——Bootstrap Confirmation 2.4.1和Bootstrap 3.3.7搭配时，确认对话框里的按钮间距偶尔会“失踪”，本质是插件生成的按钮结构没继承Bootstrap默认的按钮间距样式。给你几个实用的解决办法：

自定义CSS强制补全间距：
直接给插件生成的对话框按钮加左侧间距，把这段代码丢到你的样式文件里就行：
```
/* 修复Bootstrap Confirmation按钮间距 */
.bootstrap-confirmation .btn + .btn {
    margin-left: 8px;
}
```
这个规则会自动给所有紧跟在按钮后的按钮添加上间距，和Bootstrap原生的按钮间距逻辑完全一致。
检查插件初始化配置：
确认你初始化Confirmation时有没有正确设置按钮的类名，比如：
```
$('[data-toggle=confirmation]').confirmation({
    btnOkClass: 'btn btn-danger',
    btnCancelClass: 'btn btn-default',
    // 其他你的配置项...
});
```
一定要确保按钮都用上了Bootstrap的.btn类，有时候类名缺失也会导致样式异常。
手动调整对话框结构（可选）：
如果愿意折腾DOM结构，可以确保按钮被包裹在.modal-footer容器里——Bootstrap的.modal-footer默认会给内部按钮加合适的间距：
```
<div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Close</button>
    <button class="btn btn-danger">Delete</button>
</div>
```
不过这个方法需要修改插件模板或者初始化后的DOM，不如前两种省事。