如何在React的reactstrap ModalHeader组件中右对齐Button组件？

Hey there! Let's get those buttons aligned to the right in your ModalHeader. Since you're already using display: flex on the ModalHeader, we can use flexbox properties to fix this easily—float won't work here because flex containers ignore float styles entirely.

Here are a few clean, straightforward solutions:

Solution 1: Use Reactstrap's ml-auto Class (Recommended) #

Wrap your buttons in a container div and add the ml-auto class. This utility class sets margin-left: auto, which pushes the container to the far right in a flex layout. We'll also add align-items: center to the ModalHeader to keep the text and buttons vertically centered for a polished look:

<ModalHeader style={{ display: 'flex', alignItems: 'center' }}>
  Start Chatting
  <div className="ml-auto">
    <Button className="nav-btn" size="sm" style={{ marginLeft: '20px' }}>
      <i className="fa fa-plus-circle fa-lg" style={{ marginRight: '5px' }}></i>Create Room
    </Button>
    <Button className="end-chat" color="danger" size="sm" style={{ marginLeft: '10px' }}>
      <i className="fa fa-sign-out fa-lg"></i>End Chat
    </Button>
  </div>
</ModalHeader>

Solution 2: Inline Style with marginLeft: 'auto' #

If you prefer not to rely on Reactstrap's utility classes, you can apply the margin directly via inline style:

<ModalHeader style={{ display: 'flex', alignItems: 'center' }}>
  Start Chatting
  <div style={{ marginLeft: 'auto' }}>
    <Button className="nav-btn" size="sm" style={{ marginLeft: '20px' }}>
      <i className="fa fa-plus-circle fa-lg" style={{ marginRight: '5px' }}></i>Create Room
    </Button>
    <Button className="end-chat" color="danger" size="sm" style={{ marginLeft: '10px' }}>
      <i className="fa fa-sign-out fa-lg"></i>End Chat
    </Button>
  </div>
</ModalHeader>

Solution 3: Use justify-content: space-between #

Another option is to set justify-content: space-between on the ModalHeader. This will push the left-side text and right-side button container to opposite ends of the header:

<ModalHeader style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
  Start Chatting
  <div>
    <Button className="nav-btn" size="sm" style={{ marginLeft: '20px' }}>
      <i className="fa fa-plus-circle fa-lg" style={{ marginRight: '5px' }}></i>Create Room
    </Button>
    <Button className="end-chat" color="danger" size="sm" style={{ marginLeft: '10px' }}>
      <i className="fa fa-sign-out fa-lg"></i>End Chat
    </Button>
  </div>
</ModalHeader>

All these methods leverage flexbox's native alignment capabilities—no messy workarounds needed! Pick the one that fits your styling workflow best.

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