如何将 bootstrap 卡片中的元素对齐到卡片底部？

Question

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

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

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

Answer 1

您可以使用 display flex。但您需要将 CardBody 分成两个 div，一个包含内容，另一个包含按钮。然后使用 justifyContent: 'space-between'。还添加一些 margin-top 到环绕按钮 div 以确保一些 space 安全。

下面我描述的方法：

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

如何将 bootstrap 卡片中的元素对齐到卡片底部？

How to align elements in bootstrap cards to bottom of card?

javascript

css

twitter-bootstrap

reactjs

reactstrap