Question

我正在使用 Bootstrap 3.3.7 和 Bootstrap Confirmation 2.4.1 开发一个网络应用。确认效果很好，但是当我按下包含确认的按钮（删除）时，它会删除删除按钮和关闭按钮之间的空格，如下图所示：

查看未经确认

弹出确认后查看：

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

<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 () {
        }
    });
});

这是一个小提琴，其中有一个例子：

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

我在官方文档中找不到如何知道Confirmation出现/关闭的时间，然后我可以添加一些jQuery代码，如：

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

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

Answer 1

找到解决方案。

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

以下是Fiddle

Answer 2

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

Bootstrap Popover中的所有事件均可用，但后缀为bs.confirmation。

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

见document

删除了引导对话框中空格按钮之间的空格

2 个答案: