Bootstrap vue 卡片底部按钮要对齐

Question

我正在使用 bootstrap vue 和 vue 对 4 x 4 卡片进行编码。目前，其中一张卡片中的标题与卡片底部的按钮之一混淆。下面的媒体宽度约为 1000px。

请参考下图

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

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

我尝试解决问题的步骤是在 parent 上使用 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 一个 max-height: 112px 样式。但是我们必须给它一个大于 991px 的尺寸。这样我们就可以在 flex-direction returns 到 column 时保护我们的图像大小。这是我添加到您的样式中的内容；

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

Bootstrap vue 卡片底部按钮要对齐

Bootstrap vue cards bottom buttons to be aligned

html

css

flexbox

vue.js

bootstrap-vue