Vue组件置底方法,ElementPlus布局

问题描述

在开发网页时使用了elementplus的el-container组件

组件里分成了main和footer两块,但是想要将两个按钮置底在容器底部遇到了困难

如下图所示,在网页开发者工具可见两个按钮与左侧的图片没有底部对齐

此时我的代码是这样

javascript 复制代码
<el-footer>
   <el-row :gutter="20" style="  display: flex;justify-content: space-between;">
      <el-space>
        <el-col :span="6">
            <el-button @click="button1function" type="primary">button1</el-button>
        </el-col>
        <el-col :span="6">
            <el-button @click="button2function" type="primary">button2</el-button>
        </el-col>
      </el-space>
   </el-row> 
</el-footer>

解决办法

javascript 复制代码
<el-footer class="align-bottom">
   <el-row :gutter="20" style="  display: flex;justify-content: space-between;">
      <el-space>
        <el-col :span="6">
            <el-button @click="button1function" type="primary">button1</el-button>
        </el-col>
        <el-col :span="6">
            <el-button @click="button2function" type="primary">button2</el-button>
        </el-col>
      </el-space>
   </el-row> 
</el-footer>


//在<style>里加入以下代码
.align-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

解决效果

相关推荐
雾恋3 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊3 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A4 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理4 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人4 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥305 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董5 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon5 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii6 小时前
JAVA Web —— A / 网页开发基础
前端
gnip6 小时前
pnpm 的 monorepo架构多包管理
前端·javascript