Блог

Главная - Вопросы по программированию - Библиотека пользовательского интерфейса Ant design для react, строка типа flex в качестве реквизита не работает должным образом

Библиотека пользовательского интерфейса Ant design для react, строка типа flex в качестве реквизита не работает должным образом

#reactjs #react-native #antd #ant-design-pro

#reactjs #react-native #antd #ant-design-pro

Вопрос:

Используя библиотеку пользовательского интерфейса ant design react, я пытаюсь создать строку с тремя столбцами типа flex, но столбец по-прежнему не принимает свойство flex. найдите приведенный ниже код:

 <Content className="site-layout-background">
    <Row gutter={16} className="homepage-row" type="flex" align="middle">
        <Col className="gutter-row" span={6}>
            <div style={style}>col-6</div>
        </Col>
        
        <Col className="gutter-row" span={6}>
            <div style={style}>col-6</div>
        </Col>

        <Col className="gutter-row" span={6}>
            <div style={style}>col-6</div>
        </Col>
    </Row>
</Content>

Вот мой дополнительный css добавлен,

 .ant-row .homepage-row{
  width: 100%;
}

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

Комментарии:

1. в дизайне ant используется 24 столбца. Попробуйте изменить span = {6} на span = {8}

2. Это сработало, но когда я пытаюсь добавить еще один столбец после 3-го, он должен перейти в следующую строку справа, но он добавляется ниже среднего столбца,