在ant design中如何使 </a-button>两个按钮在一行上
时间: 2024-04-11 15:26:06 浏览: 10
在 Ant Design 中,按钮组件是 `<Button>`。要将两个按钮放在同一行上,你可以使用 Grid 栅格系统或 Flex 布局来实现。
使用 Grid 栅格系统的示例代码如下:
```jsx
import { Row, Col, Button } from 'antd';
const App = () => {
return (
<Row>
<Col span={12}>
<Button>按钮1</Button>
</Col>
<Col span={12}>
<Button>按钮2</Button>
</Col>
</Row>
);
}
export default App;
```
在这个示例中,`<Row>` 组件相当于一个容器,`<Col>` 组件则表示每一列。通过设置 `<Col>` 组件的 `span` 属性来控制每个按钮所占的宽度,这样可以将两个按钮平分在一行上。
使用 Flex 布局的示例代码如下:
```jsx
import { Button } from 'antd';
const App = () => {
return (
<div style={{ display: 'flex' }}>
<Button>按钮1</Button>
<Button>按钮2</Button>
</div>
);
}
export default App;
```
在这个示例中,通过将外层的 `<div>` 元素设置为 `display: flex`,将内部的按钮组件放置在同一行上。
无论你选择使用 Grid 栅格系统还是 Flex 布局,都可以实现将两个按钮放在一行上面的效果。根据你的实际需求选择适合的方法即可。