语义UI中的按钮触及模态的底部边缘

Question

我正在使用Semantic-UI 2.3.1。我创建了一个标准模态，在表单的底部，按钮触及了模态的底部边框/边缘。我尝试将按钮放在<div class="field"></div>内，以为该字段会在其中添加必要的填充，但事实并非如此。这是它的屏幕截图：

我的HTML：

<div class="ui modal" id="edit_invoice_modal">
    <div class="header"><?= $new ? 'New' : 'Edit'; ?> Invoice</div>
    <div class="content">
        <div id="modal_error_message" class="ui hidden error message"></div>

        <form id="data" method="post" enctype="multipart/form-data" class="ui small form">

            <div class="two fields">
                <div class="required field">
                    <label>Description</label>
                    <input type="text" name="description" value="<?= $Invoice->description; ?>" />
                </div>
                <div class="required field">
                    <label>Cost Center</label>
                    <input type="text" name="cost_center" value="<?= $Invoice->cost_center; ?>" />
                </div>
            </div>

            <div class="field">
                <input class="ui right floated compact primary button" type="submit" name="submit" id="submit" value="Submit" />
                <?php if($new === false) { ?>
                    <input class="ui right floated compact button" type="button" name="delete" id="delete" value="Delete" />
                <?php } ?>
            </div>
        </form>
    </div>
</div>

我的JS：

$('#edit_invoice_modal').modal({
    autofocus: false
});

我没有重写任何CSS样式或使用任何模板-纯香草Semantic-UI。我遍历了Semantic-UI文档中的所有模态，它们似乎都可以正常工作。我不知道我在做什么错。感谢您的帮助！