Bootstrap侧边栏渲染异常求助：如何实现预期样式？

我需要渲染出预期样式的侧边栏，但当前实际显示效果不符合预期。以下是我的代码：

<div style={{width:'250px'}} className="d-flex flex-column">
    <Tab.Container activeKey={activeKey} onSelect={setActiveKey}>
    <Nav.Item variant="tabs" className="justify-content-center">
        <Nav.Link eventKey={CONVERSATIONS_KEY}>Conversations</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey={CONTACTS_KEY}>Contacts</Nav.Link>
    </Nav.Item>
    <Tab.Content className='border-right overflow-auto flex-grow-1'>
        <Tab.Pane eventKey={CONVERSATIONS_KEY}>
            <Conversations />
        </Tab.Pane>
        <Tab.Pane eventKey={CONTACTS_KEY}>
            <Contacts />
        </Tab.Pane>
    </Tab.Content>
    <div className='p-2 border-top border-right small'>
        Your ID: <span className='text-muted'>{id}</span>
    </div>
    </Tab.Container>
</div>

解决方案 #

问题出在Nav的结构和样式配置上，调整后的代码如下：

<div style={{ width: '250px' }} className="d-flex flex-column border border-right-0">
  <Tab.Container activeKey={activeKey} onSelect={setActiveKey}>
    {/* 用Nav组件统一包裹标签项，设置tabs变体 */}
    <Nav variant="tabs" className="mb-0">
      <Nav.Item className="flex-fill text-center">
        <Nav.Link eventKey={CONVERSATIONS_KEY}>Conversations</Nav.Link>
      </Nav.Item>
      <Nav.Item className="flex-fill text-center">
        <Nav.Link eventKey={CONTACTS_KEY}>Contacts</Nav.Link>
      </Nav.Item>
    </Nav>
    {/* 调整内容区域边框，和顶部标签栏衔接 */}
    <Tab.Content className="overflow-auto flex-grow-1 border-top border-right">
      <Tab.Pane eventKey={CONVERSATIONS_KEY}>
        <Conversations />
      </Tab.Pane>
      <Tab.Pane eventKey={CONTACTS_KEY}>
        <Contacts />
      </Tab.Pane>
    </Tab.Content>
    <div className="p-2 border-top border-right small">
      Your ID: <span className="text-muted">{id}</span>
    </div>
  </Tab.Container>
</div>

关键修改点 #

• 用<Nav variant="tabs">包裹所有<Nav.Item>，确保标签栏整体样式生效
• 给每个<Nav.Item>添加flex-fill类，让两个标签平分侧边栏宽度，铺满横向空间
• 给最外层div添加border border-right-0，统一侧边栏边框样式，避免内部重复边框
• 调整<Tab.Content>的边框为border-top border-right，和顶部标签栏自然衔接
• 移除单个<Nav.Item>上的variant="tabs"，该属性需作用在<Nav>组件上

内容的提问来源于stack exchange，提问作者Jey-Es