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

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，如果你需要一个6的span，你必须给6/10 *24 = 15

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