使用bootstrap 3时的按钮间距和边距

Question

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

CLLocation.m

这将创建一个对话框，其外观如下图所示（对话框主体在事件中填充）

问题是两个<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> 按钮组合在一起，我希望按钮距对话边缘几个像素，并增加它们之间的间距。如果不修改CSS，可以在HTMl中做到这一点吗？

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

test

但是，这会使对话框显示为：

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

编辑

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>

所以，我想我可以将它添加到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; }

中的正确位置

Answer 1

将HTML插入模式应该不是问题，但请仔细检查您是否插入到正确的部分。看起来内容被插入到页脚而不是正文中。您可以考虑给模态体部分一个ID，以便您可以更容易地引用它。