Сетка и дизайн муравьев

введите здесь описание изображения

Я хочу отсортировать карточку по каждой строке в столбце 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>

reactjs antd
person Sean Kim    schedule 02.11.2018    source источник
comment
Небольшая догадка. Проблема в Card.Add Card в Col, и span не будет работать.   -  person Root    schedule 02.11.2018
comment
Ха-ха Спасибо за ваше мнение, но это работает ;;   -  person Sean Kim    schedule 06.11.2018

Ответы (2)


arrow_upward
1
arrow_downward

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

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

<Row>
     {list.map(item => <Col key={item.id} span={6}><Card /></Col>)}
</Row>
person Thành Trang    schedule 02.11.2018

arrow_upward
0
arrow_downward

вы можете использовать компонент списка и добавить grid = {{gutter: 16, column: 3}} к его реквизитам

person Arwa Tawfik    schedule 23.11.2020