如何在 '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 class 。检查后，您可以获得所需的 classes.

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

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
玩它直到你得到预期的结果

如何在 'Ant Design' 中分隔菜单和菜单选项卡的内容宽度？

how to separate a menu and menu tab content width in 'Ant Design'?

css

reactjs

antd