React Card 中的卡片文本对齐 Bootstrap

Question

我有以下用于创建卡片网格的代码，但底部的 LINK 按钮并未在所有卡片中对齐。我需要更改什么才能使右下角所有卡片中的所有 link 按钮对齐。请查看底部的图像，我希望所有 select 按钮都与该行中的其他卡片水平对齐。

  
 <Row xs={1} md={4} className="g-4">
   {MilitaryFormsType.map((e, idx) => (
     <Col>
       <Card border="#f7f7f7" style={{ width: '18rem', height: '18rem', whiteSpace: 'pre-wrap' }}>
            <Card.Body>
            <Card.Title>{e.name}</Card.Title>
            <Card.Text >{e.Description}</Card.Text>
             <Link to={e.link} >
             <Button variant="primary" style={{ backgroundColor: "#aa92df", borderStyle: "none", float: "right" }}>Select</Button>
              </Link>
              </Card.Body>
   </Card>
  </Col>
  ))}
</Row>

Answer 1

**1。如果可以使用 wrap，试试这个 **

<Card.Body>
            <Card.Title>{e.name}</Card.Title>
            <Card.Text >{e.Description}</Card.Text>
             <Link to={e.link} >
             <div style={{ text-align:center }}>
             <Button variant="primary" style={{ backgroundColor: "#aa92df", borderStyle: "none"}}>Select</Button>
             </div>
              </Link>
</Card.Body>

Answer 2

我从一个问题中了解到，您想移动所有卡片右下角的按钮。您可以在 body 上使用“相对”位置，在 link 上使用“绝对”位置。

<Card.Body style={{ position: "relative" }}>
  <Card.Title>{e.name}</Card.Title>
  <Card.Text>{e.Description}</Card.Text>
  <Link to={e.link} style={{ position: "absolute", bottom: 0, right: 0 }}>
    <Button
      variant="primary"
      style={{
        backgroundColor: "#aa92df",
        borderStyle: "none",
        float: "right",
      }}
    >
      Select
    </Button>
  </Link>
</Card.Body>

React Card 中的卡片文本对齐 Bootstrap

Card Text alignment in react Card Bootstrap

reactjs

card