「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が含まれます。このアイデアは、タブのナビゲーションバーに対応するdivを選択し、それにant-col-6クラスを適用することです。点検すると、必要なクラスを取得することができます。

あなたのコンポーネントに次のコード行追加：6のspanが必要な場合は、なぜant-col-15知るために

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

を、あなたは6/10を与えなければならない* 24 = 15

参照してください。私のペン：https://codepen.io/danegit/pen/XzbLWL
期待通りの結果が得られるまでそれを試してください