React项目中Accordion.Header容器内元素如何实现左右两侧分布

问题根源 #

你用的React Bootstrap组件库中，Accordion.Header默认自带display: flex样式，你仅给它设置了width: 100%，但未给其内部的Card.Header设置占满宽度的属性，导致Card.Header仅由内容撑开宽度，内部的flex分配自然无法实现左右两侧分布的效果。

解决方案 #

方案1（最小改动，保留现有嵌套结构） #

给Card.Header补充width: 100%样式即可：

<Accordion.Header style={{ width: '100%'}}>
  {/* 新增width: 100%到Card.Header的行内样式中 */}
  <Card.Header style={{ display: 'flex', width: '100%' }}>
    {/* 其余原有代码保持不变 */}
  </Card.Header>
</Accordion.Header>

方案2（优化结构，减少冗余嵌套） #

Accordion.Header本身就是flex容器，你可以直接把布局逻辑写在它上面，去掉多余的Card.Header嵌套，同时保留原有的内边距样式即可：

<Accordion.Header 
  style={{ 
    display: 'flex', 
    width: '100%', 
    padding: '1rem' /* 复刻Card.Header的默认内边距 */ 
  }}
>
  <span
    style={{
      color: 'black',
      textDecoration: 'none',
      flex: 1,
      cursor: 'pointer',
      alignSelf: 'center',
      fontSize: 18,
    }}
  >
    <div as={Card.Text}
    variant='link'
    eventKey='0'>
    {note.title}
    </div>
  </span>
  <div>
    <Button href={`/note/${note._id}`}>Edit</Button>
    <Button
    variant='danger'
    className='mx-2'
    onClick={() => deleteHandler(note._id)}
    >
    Delete
    </Button>
  </div>
</Accordion.Header>

修改后刷新页面即可实现文字左对齐、按钮靠右停靠的布局效果。

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