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

Question

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

请注意，CodeSandbox output window 必须足够宽，以便卡片可以并排堆叠，如下图所示。

代码沙盒

下面的代码内容：

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>
  );
}

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