작성
·
583
0
ㅋ카드가 모양이 제대로 안나옵니다. antd에서 가져오고 딱히 건든건 없는것같은데 무엇이 문제일까요
import React from "react";
import { List, Button, Card } from "antd";
import { StopOutlined } from "@ant-design/icons";
const FollowList = ({ header, data }) => {
return (
<List
style={{ marginBottom: "20px" }}
grid={{ gutter: 4, xs: 2, md: 3 }}
size="small"
header={<div>{header}</div>}
loadMore={
<div style={{ textAlign: "center", margin: "10px 0" }}>
<Button>더 보기</Button>
</div>
}
bordered
dataSource={data}
renderItem={(item) => (
<List.Item style={{ marginTop: "20px" }}>
<Card actions={[<StopOutlined key="stop" />]}>
<Card.Meta description={item.nickname} />
</Card>
</List.Item>
)}
/>
);
};
export default FollowList;
답변 6
1
0
0
2021. 09. 30. 14:48
뭔가 더 이상해지네요,,
gutter 기본값이 4이고 xs일땐 2, md일땐 3이라는 뜻인가요? md를 gutter와 똑같이 4로 하니까 모바일 화면으로 바꾸기 직전에 확 작아지는 부분은 없어지네요.
화면 레이아웃이 xs로 바뀐 후에 더 작아져야 팔로워목록의 카드들도 화면에 맞춰지는데
동시에 되도록 하려면 어떻게 해야할까요?