如何在“Ant设计”中分离菜单和菜单选项卡的内容宽度？

Question

我希望菜单宽度为<Col span={6} offset={8}>，内容为<Col span={10} offset={7}>。我该怎么做？

  <Row>
    <Col span={6} offset={8}>
    <Tabs defaultActiveKey="2" >
      <TabPane tab="About" key="1"><About /></TabPane>
      <TabPane tab="My Projects" key="2"><MyProjects /></TabPane>
      <TabPane tab="Contact" key="3"><Contact /></TabPane>
    </Tabs>
    </Col>
  </Row> 

此代码会粉碎span={6}

中的所有内容

Answer 1

这个解决方案很棘手。 呈现TabPane组件时，它包含许多div。我们的想法是选择与选项卡导航栏对应的div并将ant-col-6类应用于它。检查后，您可以获得所需的课程。

将以下代码行添加到您的组件中：

let navBar = document.getElementsByClassName('ant-tabs-bar')[0];
navBar.className += ' ant-col-15';
console.log(navBar)

要知道为什么ant-col-15，如果您需要span为6，则必须提供6/10 * 24 = 15

看我的笔：https://codepen.io/danegit/pen/XzbLWL
玩它直到你得到预期的结果