html - Bootstrap 5 模态页脚左右对齐

Question

有人可以帮我处理 Bootstrap 5 模态页脚吗？
我想让模态页脚在左侧有一个文本(跨度或标签)，在右侧有一个按钮

我找到了 this解决方案并尝试(将所有内容从“左”更改为“开始”)但不起作用。
我尝试使用 d-flex justify-content-start 并尝试使用 float-start 但仍然无法正常工作。

Answer 1

只需在模态页脚上使用 justify-content-between 类...

<!-- Modal -->
<div class="modal fade" id="inputInv" tabindex="-1" aria-labelledby="InputInventory" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="InputInventory">INPUT DATA</h5>
            </div>
            <div class="modal-body">
                <!-- CONTENT HERE -->
            </div>
            <div class="modal-footer justify-content-between">
                <div>
                    <span>Example vertically aligned text</span>
                </div>
                <div class="actions">
                    <button id="btnInClose" type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button id="btnInSave" type="button" class="btn btn-sm btn-primary">Save</button> 
                </div>
            </div>
        </div>
    </div>
</div>

Updated Codeply