如何使用reactstrap实现ModalHeader内ButtonDropdown的右对齐

问题根因 #

你遇到的布局失效问题根因很明确：reactstrap的ModalHeader组件会自动将所有子元素包裹在.modal-title容器内，而这个容器默认是内容自适应宽度，不会占满ModalHeader除关闭按钮外的剩余空间。你在有限宽度的容器内使用mr-auto/ml-auto自然无法实现左右对齐的效果。你之前移除modal-header的flex属性之所以看起来生效，是因为块级的modal-title会默认占满整行，但这样会破坏关闭按钮的默认布局，导致按钮换行，不推荐这么做。

最优解决方案 #

不需要修改默认框架样式，只用reactstrap自带的属性和Bootstrap工具类就能实现需求：

1. 给ModalHeader组件添加titleClassName="w-100"属性，让包裹内容的.modal-title占满所有可用宽度
2. ModalHeader内部用d-flex容器包裹内容，给下拉菜单添加ms-auto实现右对齐，再加me-3和右侧关闭按钮保留安全间距

修改后的完整代码如下：

<Modal isOpen={modal} toggle={toggleModal} className="modal-lg modal-dialog-scrollable" returnFocusAfterClose={false}>
    <ModalHeader 
      toggle={toggleModal}
      titleClassName="w-100"
    >
        <div className="d-flex align-items-center">
            <span className="align-middle">Modal Title</span>
            <ButtonDropdown isOpen={dropdownOpen} toggle={toggleDropdown} className="ms-auto me-3">
                <DropdownToggle caret color="info" className="btn-sm">
                    Dropdown
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>Header</DropdownItem>
                    <DropdownItem disabled>Action</DropdownItem>
                    <DropdownItem>Another Action</DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>Another Action</DropdownItem>
                </DropdownMenu>
            </ButtonDropdown>
        </div>
    </ModalHeader>
    <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ModalBody>
</Modal>

内容的提问来源于stack exchange，提问作者redmoncoreyl