删除了 bootstrap 对话框中 space 个按钮之间的 space

Question

我正在使用 Bootstrap 3.3.7 和 Bootstrap Confirmation 2.4.1[=49= 开发网络应用程序].确认效果很好，但是当我按下包含确认的按钮（删除）时，它会删除删除和关闭按钮之间的一些 space，如下图所示：

未经确认查看：

弹出确认后查看：

这是带有确认按钮的对话框的代码：

<a href="#divResults" data-toggle="modal" data-target="#divResults" class="btn btn-info btn-lg">
  <span class="glyphicon glyphicon-list-alt"></span> Table
</a>

<div class="modal fade" id="divResults" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-body">
                    <table class="table">
                        <caption>Meeting at 12/04/2018</caption>
                        <thead>
                            <tr>
                                <th>Member</th>
                                <th>Role</th>
                                <th>Time</th>
                            <tr>
                        </thead>
                        <tbody id="tBodyResults"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="linkDownload"><span class="glyphicon glyphicon-download-alt"></span> <span>Export</span></button>
                    <button id="btnDelete" class="btn btn-danger"
                            data-btn-ok-label="Yes" data-toggle="confirmation"
                            data-btn-ok-class="btn-danger"
                            data-btn-cancel-label="No" data-btn-cancel-class="btn-default"
                            data-title="Are you sure you want to delete this agenda?">
                        <span class="glyphicon glyphicon-trash"></span> <span>Delete</span>
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> <span>Close</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

确认书标题的自定义 CSS：

.popover-title {
    font-weight: bold;
}

我用来加载确认的JS：

$(function () {
    $("[data-toggle=confirmation]").confirmation({
        rootSelector: "[data-toggle=confirmation]",
        onConfirm: function () {
        }
    });
});

这里有一个Fiddle的例子：

https://jsfiddle.net/fanmixco/o2mre604/16/

我在官方文档中找不到任何关于如何知道 Confirmation appears/closes 的选项，然后我可以从我这边添加一些 jQuery 代码，例如：

$("#btnDelete").prop("margin-right", "6px");

如果有人知道如何修复，我们将不胜感激。谢谢。

Answer 1

因为Bootstrap确认使用popover，你可以捕捉事件跟随popover结构

来自 Bootstrap 弹出窗口的所有事件都可用，但后缀为 bs.confirmation。

$('#myPopover').on('show.bs.confirmation', function () {
  // do something…
})

参见document

Answer 2

找到解决方案。

您需要将 css 添加为 .btn{margin-left: 5px;}

这是Fiddle