javascript - 确保 react 中折叠到小屏幕时卡片之间的空间

Question

我试图确保当我在小屏幕上查看我的 react 网站时，我的卡片之间有空间。现在，当我在大屏幕上查看时，卡片间隔均匀，但是，在小屏幕上，它们不是空格。有人遇到过这个问题吗？

这是我的代码

<Row gutter={16} justify="space-between" align="middle">
    {this.state.news.slice(0,4).map((item, key) => ( 
        <Col span={12} md={{span:6}} lg={{span:6}} style={{paddingTop:15,marginTop:10}}>
            <Card
                hoverable
                style={{ width: 230 }}
                cover={<img alt="example" src={item.imageurl} />}
                actions={[
                    <a href={item.url} target="_blank" > Read News</a>,
                ]}>  
                <div style={{fontSize:10,paddingRight:5}}>
                    <Meta  title={item.title} description={item.categories} />
                </div>
            </Card>
        </Col>
    ))}
</Row>

cards on a big screen

cards on a small screen

Answer 1

您有style={{ width: 100 }}，这将使所有屏幕的宽度保持固定。拿出来试试。

 <Card
                 hoverable
                //  style={{ width: 100 }}
                 cover={<img alt="example" src={i.picture.large} />}
                 actions={[
                     <a href='#' target="_blank" > Read News</a>,
                 ]}>  

             </Card>