使用引导程序 3 时的按钮间距和边距

Question

我正在使用 bootstrap 和 jquery 在 django 模板中创建模式对话框。对话框创建如下：

<div id="dialog" class="modal" title="Edit" style="display:none">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Review Uploaded Image</h4>
              </div>
              <div class="modal-body"></div>
              <a href="#" class="btn btn-primary" id="test-event">Test</a>
              <a href="#" class="btn btn-primary" id="test-event2">Test2</a>
              <div class="modal-footer">
                <a href="#" class="btn btn-success" id="save-event">Save</a>
              </div>
          </div>
        </div>
    </div>

这将创建一个如下图所示的对话框（对话框主体填充了一个事件）

问题是两个test 按钮被捆绑在一起，我想让按钮离对话框边缘几个像素，并增加它们之间的间距。是否可以在不修改 CSS 的情况下在 HTML 本身中执行此操作？

其次，我想按如下方式在对话框页脚中移动这些按钮，但它以一种非常意想不到的方式改变了对话框的外观。我喜欢页脚的按钮：

<div class="modal-footer">
            <a href="#" class="btn btn-primary" id="test-event">Test</a>
            <a href="#" class="btn btn-primary" id="test-event2">Test2</a>  
            <a href="#" class="btn btn-success" id="save-event">Save</a>

</div>

但是，这会使对话框看起来像：

正如您所见，页脚分隔符已消失，并且由于某种原因，所有内容都移到了表单元素的其余部分下方。

编辑

HTML 的插入是这样完成的：

function EditDialog(pk) {
        sessionStorage.setItem("pk", pk.toString());
        $.ajax({
            url: "{% url 'populatereviewform' %}",
            method: 'GET',
            data: {
            pk: pk
        },
        success: function(formHtml){
            //place the populated form HTML in the modal body
            $( "#dialog" ).modal({width: 500, height: 500});
            $('.modal-body').html(formHtml);
            $('#dialog').on('hidden.bs.modal', function () {
                window.location.reload();
            })
        },
        dataType: 'html'
        });

        return false;
    }

所以，我想我可以将它添加到 $('.modal-body').html(formHtml); 的正确位置

Answer 1

将 HTML 插入模态框应该不是问题，但是请仔细检查您是否插入了正确的部分。看起来内容被插入到页脚而不是正文中。您可以考虑为 modal-body 部分提供一个 ID，以便您可以更轻松地引用它。