如何将引导卡中的元素与卡底部对齐？

Posted 2023-03-23

【中文标题】如何将引导卡中的元素与卡底部对齐？

【英文标题】：How to align elements in bootstrap cards to bottom of card?

【发布时间】：2021-04-20 23:11:52

【问题描述】：

在下面的 CodeSandbox 示例中，我有两个并排的 Bootstrap (reactstrap) Card 元素。有没有办法让每张卡片中的按钮与卡片底部对齐，加上一些边距，所以它们看起来彼此对齐？我尝试了 Bootstrap 文档中的各种 Flexbox 类：https://getbootstrap.com/docs/4.0/utilities/flex/，但没有任何效果。

注意，CodeSandbox 输出窗口必须足够宽，以便卡片可以并排堆叠，如下图所示。

CodeSandbox

以下代码内容：

import React from "react";
import ReactDOM from "react-dom";
import 
  Card,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  CardDeck,
  Button
 from "reactstrap";

function App() 
  return (
    <div className="App">
      <CardDeck>
        <Card>
          <CardBody>
            <CardTitle tag="h5">Card title</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Card subtitle
            </CardSubtitle>
            <CardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardBody>
            <CardTitle tag="h5">Card title</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Card subtitle
            </CardSubtitle>
            <CardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content. Some quick example text to build on
              the card title and make up the bulk of the card's content.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
      </CardDeck>
    </div>
  );

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

【参考方案1】：

您可以使用显示弹性。但是您需要将CardBody 分成两个 div，一个带有内容，另一个带有按钮。然后使用justifyContent: 'space-between'。还为包装按钮 div 添加一些 margin-top 以确保一些安全空间。

低于我描述的方法：

<Card>
  <CardBody style=display: 'flex', flexDirection: 'column', justifyContent: 'space-between'>
    <div>
      <CardTitle tag="h5">Card title</CardTitle>
      <CardSubtitle tag="h6" className="mb-2 text-muted">
        Card subtitle
      </CardSubtitle>
      <CardText>
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </CardText>
    </div>

    <div style=marginTop: '12px'>
      <Button >Button</Button>
    </div>
  </CardBody>
</Card>