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

Posted 2023-02-24

【中文标题】使用引导程序 3 时的按钮间距和边距

【英文标题】：button spacing and margin when using bootstrap 3

【发布时间】：2017-08-14 17:10:09

【问题描述】：

我正在使用 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); 的正确位置

【问题讨论】：

我把它放到 sn-p 中看起来很好：bootply.com/oapRb5DCWG

@RachelS 呵呵....好的，我会做更多的测试和报告。可能是因为以后填充了对话框体，才有这个问题……

也许发布整个模态的html？

@RachelS 通过编辑更新了问题

【参考方案1】：

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

【讨论】：

用编辑更新了问题以显示它是如何插入的。看起来不错，我想...

我们能看到构建“formHtml”的代码吗？插入正文内容的 javascript 看起来不错。 bootply.com/mca80npYIk