如何将 ModalHeader 内的 ButtonDrowpdown 与 reactstrap 右对齐？

Posted 2023-03-23

【中文标题】如何将 ModalHeader 内的 ButtonDrowpdown 与 reactstrap 右对齐？

【英文标题】：How do I right align a ButtonDrowpdown inside a ModalHeader with reactstrap?

【发布时间】：2021-11-01 07:06:55

【问题描述】：

到目前为止，我对 Modal 感到非常满意，只是下拉菜单不是我想要的。我希望它更靠右，就在“x”按钮的左侧。这是我到目前为止的代码：

<Modal isOpen=modal toggle=toggleModal className="modal-lg modal-dialog-scrollable" returnFocusAfterClose=false>
    <ModalHeader toggle=toggleModal>
        <span className="align-middle mr-auto">Modal Title</span>
        <ButtonDropdown isOpen=dropdownOpen toggle=toggleDropdown>
            <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>
    </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>

我尝试在ModalHeader 和ml-auto 上的ml-auto 内的内容周围使用带有flex-row div 的引导类，但这对我不起作用。

更新 1 经过一段时间的研究，我仍然无法弄清楚如何解决这个问题。我确实知道 reactstrap 源代码将所有内容都包装在 modal-title div 中，然后再将 modal-header 包装在其中（我通过查看 ModalHeader.js 发现了这一点）。为了进一步研究，我用 reactstrap 写了一个基本示例：

<Modal isOpen=modal toggle=toggleModal>
    <ModalHeader>
        <div className="d-flex flex-row">
        <h5 className="mr-auto">Test 1</h5>
        <h5>Test 2</h5>
        </div>            
    </ModalHeader>
    <ModalBody>
        Lorem ipsum .
    </ModalBody>
</Modal>

这会呈现为以下 html 和 css：

<div class="modal-header">
    <h5 class="modal-title">
        <div class="d-flex flex-row">
        <h5 class="mr-auto">Test 1</h5>
        <h5>Test 2</h5>
        </div>
    </h5>
</div>

.modal-header 
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);


.modal-title 
    margin-bottom: 0;
    line-height: 1.5;

但这仍然不起作用：“测试 1”和“测试 2”彼此相邻，而不是左侧的 1 和右侧的 2。我知道如果我删除模态标题display:flex，它看起来就像是固定的，但我不确定为什么。我认为modal-title 不是问题。

【参考方案1】：

Reactstrap 在 ModalHeader 之后创建另一个标签 <h5 class="modal-title">...</h5>，它包含您放入的所有内容 ModalHeader。这是第一个需要修复的地方 这个sn-p的问题。

style.css

.modal-title 
  width: 100%;
  display: flex;

第二位是<span className="align-middle mr-auto">Modal Title</span>将mr-auto替换为flex-grow-1 codesandbox example

App.js

<Modal
    isOpen=modal
    toggle=toggleModal
    className="modal-lg modal-dialog-scrollable"
    returnFocusAfterClose=false
  >
    <ModalHeader toggle=toggleModal>
      <span className="align-middle flex-grow-1">Modal Title</span>
      <ButtonDropdown isOpen=dropdownOpen toggle=toggleDropdown>
        <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>
    </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>

【参考方案2】：

您也可以将 .modal-title 设置为 flex。

.modal-title 
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    line-height: 1.5;

这假定下拉列表也是 .modal-title 的子级，您没有显示。

【参考方案3】：

.modal-title div 后面的 div 不需要。

<div class="modal-header">
    <h5 class="modal-title">       
        <h5 class="mr-auto">Test 1</h5>
        <h5>Test 2</h5>       
    </h5>
</div>

.modal-header 
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);


.modal-title 
    display: flex;
    margin-bottom: 0;
    line-height: 1.5;

【参考方案4】：

我不知道任何问候是否已经帮助你，也许试试这个。

将position: relative; 放在.model-header 本身上。然后在下拉按钮上关注css

.button 
    position: absolute;
    top: 20px; //the padding on the header itself
    right: 80px //the padding on the header itself + the width of the close button + space between dropdown and close button

顶部和右侧的间距由您决定，但应该可以解决问题。