問題:
el-row布局里面的el-card內容不一娶眷,導致card的高度不一致
image.png
解決方案:
在el-row上添加一個row-box類名,在el-card上添加一個el-card類名薄啥,樣式如下面的代碼
注意:
- <style>添加類名的樣式一定要寫在這里面</style>
- el-card上添加的類名必須是el-card
<template>
<el-row :gutter="12" class="row-box">
<el-col :span="8">
<el-card shadow="always" class="el-card" >
</el-card>
</el-col>
</el-row>
</template>
<style>
.row-box {
display: flex;
flex-flow: wrap;
}
.row-box .el-card {
min-width: 100%;
height: 100%;
margin-right: 20px;
border: 0px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
</style>