react Card Bootstrap中的卡片文本对齐答案

【问题标题】：react Card Bootstrap中的卡片文本对齐
【发布时间】：2022-01-23 16:27:31
【问题描述】：

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

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

【问题讨论】：

它们已经水平对齐（它们在卡片的右侧）。所以我猜你想让它们垂直对齐，所以它们都在卡片的底部？
你的按钮都是这样上下的原因是因为你的描述的长度，所以要么你有一个定义的描述大小，要么你截断了太长的描述

标签： reactjs card

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：