大佬教程收集整理的这篇文章主要介绍了Bootstrap vue 卡底部按钮要对齐，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在使用 bootstrap vue 和 vue 来编码一张 4 x 4 的卡片。目前，其中一张卡片中的标题与卡片底部的按钮之一混淆。下面的媒体宽度约为 1000 像素。
请参考下图
但是，当我将标题更改为较短的标题时，它会对齐。请参考下图
我知道这与宽度有关，但我似乎无法弄清楚是什么原因造成的。
我试图解决该问题的步骤是在父项上使用 flex grow 并为标题使用自动换行，但仍然没有。希望有人能有所启发。
Attach 是我代码沙箱的 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>
我认为问题在于图像大小。为了控制它，我们可以给 card-img 一个 max-height: 112px 样式。但是我们必须给它一个大于 991px 的尺寸。这样我们就可以在 flex-direction 返回到 column 时保护我们的图像大小。这是我添加到您的样式中的内容；
@media screen and (min-width: 992px) {
.card-img,.card-img-top,.card-img-bottom {
max-height: 112px !important;
}
}
以上是大佬教程为你收集整理的Bootstrap vue 卡底部按钮要对齐全部内容，希望文章能够帮你解决Bootstrap vue 卡底部按钮要对齐所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。