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,18 +54,17 @@ const contentListNoTitle = {
   project: <p>project content</p>,
 };
 
-class TabsCard extends React.Component {
-  state = {
-    key: 'tab1',
-    noTitleKey: 'app',
+const TabsCard = () => {
+  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
+  const [activeTabKey2, setActiveTabKey2] = useState('app');
+
+  const onTab1Change = key => {
+    setActiveTabKey1(key);
+  };
+  const onTab2Change = key => {
+    setActiveTabKey2(key);
   };
 
-  onTabChange = (key, type) => {
-    console.log(key, type);
-    this.setState({ [type]: key });
-  };
-
-  render() {
   return (
     <>
       <Card
@@ -72,30 +72,29 @@ class TabsCard extends React.Component {
         title="Card title"
         extra={<a href="#">More</a>}
         tabList={tabList}
-          activeTabKey={this.state.key}
+        activeTabKey={activeTabKey1}
         onTabChange={key => {
-            this.onTabChange(key, 'key');
+          onTab1Change(key);
         }}
       >
-          {contentList[this.state.key]}
+        {contentList[activeTabKey1]}
       </Card>
       <br />
       <br />
       <Card
         style={{ width: '100%' }}
         tabList={tabListNoTitle}
-          activeTabKey={this.state.noTitleKey}
+        activeTabKey={activeTabKey2}
         tabBarExtraContent={<a href="#">More</a>}
         onTabChange={key => {
-            this.onTabChange(key, 'noTitleKey');
+          onTab2Change(key);
         }}
       >
-          {contentListNoTitle[this.state.noTitleKey]}
+        {contentListNoTitle[activeTabKey2]}
       </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;