Bootstrap 5模态页脚左右对齐

Question

有人可以帮助我使用 Bootstrap 5 模态页脚吗？
我想让模态页脚在左侧有一个文本（跨度或标签），在右侧有按钮

我找到了这个解决方案并尝试了它（将所有内容从“左”更改为“开始”）但不起作用。
我尝试使用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>

更新了 Codeply

Answer 2

你需要修改一些结构来实现它。

CSS：

.modal-footer {
    justify-content: space-between;
}

HTML：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#inputInv">
  Launch demo modal
</button>

<!-- 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">
                <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>

检查这个例子。