javascript - 在反应中确保折叠到小屏幕上的卡片之间的空间

Question

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

这是我的代码

<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>

大屏幕上的卡片

小屏幕上的卡片

标签： javascriptreactjs

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>