Bootstrap vue卡底部按钮对齐

Question

我正在使用带有 vue 的 bootstrap vue 来编写 4 x 4 卡。目前，其中一张卡片中的标题与卡片底部的一个按钮相混淆。下面的媒体宽度约为 1000 像素。

请参考下图

但是，当我将标题更改为较短的标题时，它是对齐的。请参考下图

我知道这与宽度有关，但我似乎无法弄清楚是什么原因造成的。

我尝试解决问题的步骤是在父级上使用 flex grow 并为标题使用自动换行，但仍然没有。希望有人能解释一下。

附加是我的代码沙箱的 url。 https://codesandbox.io/s/vue-cards-hx5c9

我还将在下面附上我的代码。谢谢。 更新：我已经在我的沙盒中更新了我的字体系列，然后问题就出现了

<template>
  <b-container fluid class="bv-example-row cards-row">
    <b-row cols="1" cols-sm="1" cols-md="1" cols-lg="4">
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Stock & ETFs"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              0% commission means there’s no markup on stocks & ETFs – no matter
              how much you invest
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Invest in Stocks</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Cryptocurrencies"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Buy, sell and store Bitcoin and other leading cryptos with ease
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary"
                  >Buy Cryptocurrencies</b-button
                >
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="CFD Trading"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Go long or short on FX from just 1 pip. Trade commodities and
              indices with flexible leverage
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Trade Now</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Forex"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nam
              qui illum. Ipsa aliquam quas magnam est perferendis a, repellendus
              unde, nemo expedita doloremque suscipit ut dolore consequuntur
              amet vero!
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Buy Forex</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
export default {
  name: "Content",
  data() {
    return {};
  },
};
</script>
<style scoped>
.cards-row {
  position: relative;
  bottom: 50px;
}

.card-text {
  min-height: auto;
  flex-grow: 1;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cta_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

@media screen and (max-width: 992px) {
  .cta_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 992px) {
  .desktop-col {
    display: flex;
    justify-content: center;
  }
}
</style>

Answer 1

我认为问题在于图像大小。为了控制这一点，我们可以为 card-img 赋予 ma​​x-height: 112px 样式。但是我们必须给它一个大于 991px 的尺寸。这样我们就可以在 flex-direction 返回 column 时保护我们的图像尺寸。这是我为您的风格添加的内容；

@media screen and (min-width: 992px) {
  .card-img,
  .card-img-top,
  .card-img-bottom {
    max-height: 112px !important;
  }
}