style: fix Card tabs of left position (#32695)

close #32673

components/card/demo/tabs.md

@@ -14,6 +14,7 @@ title:
 More content can be hosted.
 
 ```jsx
+import React, { useState } from 'react';
 import { Card } from 'antd';
 
 const tabList = [
@@ -53,49 +54,47 @@ const contentListNoTitle = {
   project: <p>project content</p>,
 };
 
-class TabsCard extends React.Component {
+const TabsCard = () => {
-  state = {
+  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
-    key: 'tab1',
+  const [activeTabKey2, setActiveTabKey2] = useState('app');
-    noTitleKey: 'app',
+
+  const onTab1Change = key => {
+    setActiveTabKey1(key);
+  };
+  const onTab2Change = key => {
+    setActiveTabKey2(key);
   };
 
-  onTabChange = (key, type) => {
+  return (
-    console.log(key, type);
+    <>
-    this.setState({ [type]: key });
+      <Card
-  };
+        style={{ width: '100%' }}
-
+        title="Card title"
-  render() {
+        extra={<a href="#">More</a>}
-    return (
+        tabList={tabList}
-      <>
+        activeTabKey={activeTabKey1}
-        <Card
+        onTabChange={key => {
-          style={{ width: '100%' }}
+          onTab1Change(key);
-          title="Card title"
+        }}
-          extra={<a href="#">More</a>}
+      >
-          tabList={tabList}
+        {contentList[activeTabKey1]}
-          activeTabKey={this.state.key}
+      </Card>
-          onTabChange={key => {
+      <br />
-            this.onTabChange(key, 'key');
+      <br />
-          }}
+      <Card
-        >
+        style={{ width: '100%' }}
-          {contentList[this.state.key]}
+        tabList={tabListNoTitle}
-        </Card>
+        activeTabKey={activeTabKey2}
-        <br />
+        tabBarExtraContent={<a href="#">More</a>}
-        <br />
+        onTabChange={key => {
-        <Card
+          onTab2Change(key);
-          style={{ width: '100%' }}
+        }}
-          tabList={tabListNoTitle}
+      >
-          activeTabKey={this.state.noTitleKey}
+        {contentListNoTitle[activeTabKey2]}
-          tabBarExtraContent={<a href="#">More</a>}
+      </Card>
-          onTabChange={key => {
+    </>
-            this.onTabChange(key, 'noTitleKey');
+  );
-          }}
+};
-        >
-          {contentListNoTitle[this.state.noTitleKey]}
-        </Card>
-      </>
-    );
-  }
-}
 
 ReactDOM.render(<TabsCard />, mountNode);
 ```

components/card/style/index.less

@@ -66,7 +66,7 @@
       }
     }
 
-    .@{ant-prefix}-tabs {
+    .@{ant-prefix}-tabs-top {
       clear: both;
       margin-bottom: @card-head-tabs-margin-bottom;
       color: @text-color;