如何解决在React Bootstrap中将Card Footer中的对齐按钮向右
我正在尝试在React Bootstrap的Card.footer
中将一个按钮(最后是2个按钮)对齐到右侧。我尝试了style=={{display: 'flex',display: 'flex',alignItems: 'flex-end',float: 'right'}}
和className='btn btn-success btn-lg float-right'
以及它们的许多组合,没有任何改变。
我的卡如下:
<Card style={{ marginBottom: "15px",marginTop: "15px",cursor: 'pointer' }}>
<ListGroup>
<ListGroup.Item>
<Container>
Card Content
</Container>
</ListGroup.Item>
</ListGroup>
<Card.Footer>
<Row>
<Button className='btn btn-success btn-lg float-right' style={{ display: 'flex',float: 'right' }}>Like</Button>
</Row>
</Card.Footer>
</Card>
解决方法
使用ml-auto
类(左边距:自动)
<Button className="btn btn-success btn-lg ml-auto">
https://getbootstrap.com/docs/4.5/utilities/spacing/#notation
对于右边的后续按钮,请应用ml-x
,例如ml-2
<Row>
<Button className="btn btn-success btn-lg ml-auto">Like</Button>
<Button className="btn btn-success btn-lg ml-2">Another Btn</Button>
</Row>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。