Сетка и Муравей Дизайн

Question

Я хочу отсортировать карточку поста по каждой строке, есть столбец 3. но когда я ввел код в style={{""} не работает.

А потом я использую Ant-Design. Пожалуйста, помогите, как я могу решить эту проблему?

props.list.map(result => (
    <div key={result.id}>
        <Row className="gutter-example" gutter={16}>
            <Col className="gutter-row" span={6}>
            <Card hoverable style={{ width: 200 }} cover={ result.volumeInfo.imageLinks ? <img alt="BookCover" src={result.volumeInfo.imageLinks.thumbnail} />:
            <img alt="Alternative_Cover" src={AlterNative} />
            }
            >
            <Meta title={result.volumeInfo.title} description={ <a href={result.volumeInfo.infoLink}>
            {result.volumeInfo.infoLink}
            </a>
            }
            />
            </Card>
            </Col>
        </Row>
    </div>

Answer 1

Я не использую Ant Design, но, хотя <Row /> компонент является оберткой, он должен обернуть все ваши <Col />

Итак, если вы хотите визуализировать 3 элемента в каждом, вы должны визуализировать все <Col span={6} /> в <Row /> компоненте. Каждый <Row /> - это контейнер средней ширины.

<Row>
     {list.map(item => <Col key={item.id} span={6}><Card /></Col>)}
</Row>