我试图确保当我在小屏幕上查看我的 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>
最佳答案
您有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>
关于javascript - 确保 react 中折叠到小屏幕时卡片之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59908410/