如何使用 reactstrap 右对齐 ModalHeader 中的 ButtonDrowpdown？

Question

我对目前的模式非常满意，只是下拉菜单不在我想要的位置。我想让它更靠右，就在 '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>

我尝试使用 bootstrap 类和 flex-row div 围绕 ModalHeader 和 ml-auto 里面的东西ButtonDropdown 但这对我不起作用。

更新 1 经过一段时间的研究，我仍然无法弄清楚如何解决这个问题。我确实知道 reactstrap 源代码将所有内容包装在 modal-title div 中，然后再将 modal-header 包装在 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 在右边。我知道如果我删除模态 header display:flex 它看起来像是固定的但我不确定为什么。我认为 modal-title 不是问题。

Answer 1

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

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

这假设下拉菜单也是 .modal-title 的子项，您没有显示。

Answer 2

您不需要 .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;
}

Answer 3

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

style.css

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

第二名是<span className="align-middle mr-auto">Modal Title</span>将mr-auto替换为flex-grow-1codesandbox 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>

Answer 4

不知道上面的解决方案有没有帮到你，不妨试试这个。

在 .model-header 本身上放置一个 position: relative;。然后在下拉按钮

上关注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
}

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

如何使用 reactstrap 右对齐 ModalHeader 中的 ButtonDrowpdown？

How do I right align a ButtonDrowpdown inside a ModalHeader with reactstrap?

html

css

flexbox

reactstrap