Element-UI使用el-row高度設置方式
更新時間：2024年08月06日 08:42:32 作者：清雨未盡時
這篇文章主要介紹了Element-UI使用el-row高度設置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Element-UI 使用el-row 高度設置
使用el-row 布局列數(shù)多個時候，出現(xiàn)了高度不適應且排列混亂 的問題
處理辦法在 el-row 布局屬性上加入
<el-row :gutter="20" class="el-row">
.el-row {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap
}
.el-card {
min-width: 100%;
height: 100%; 高度要設置百分比才可以
margin-right: 20px;
transition: all .5s;
}設置完成后
el-row和el-col在element ui中的注意點
el-row是將一行分成24份。代表一行。
el-row中寫el-col，el-col代表的是列，寫幾個el-col就表示有幾列。列的寬度用span來規(guī)定。表示你這列占這一行24份中的幾份。
注意：
el-row中只有1個el-col的時候，el-col的span可以不用寫，它默認占一行的24份，但是el-row有多個el-col的時候，el-col必須要寫span
注意：
不管el-row里嵌套多少el-row,el-row都代表24份
//第1層的el-row表示1行，這行分成24份
//父元素
<el-row>
<el-col>
//下面這個el-row是子元素，但是它也是一行，這一行有24份
<el-row>
//下面的el-col，這一列，要想占滿這行，就是占24份,span要為24才行，記住，el-row表示24份
<el-col :span="24"></el-col>
</el-row>
</el-col>
</el-row>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue.extend構造器的詳解的相關資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Electron-vue腳手架改造vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了vue 請求后臺數(shù)據(jù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧、2017-06-06
vue3 添加編輯頁使用 cron 表達式生成方法小結(jié)
這篇文章主要介紹了vue3 添加編輯頁使用 cron 表達式生成方法小結(jié),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
解決vue+router路由跳轉(zhuǎn)不起作用的一項原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項原因，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
文章介紹了如何使用Vue+Echarts3D實現(xiàn)地圖效果,并分享了index.vue組件和mapOptions.js的核心方法,希望對大家有所幫助2025-12-12
element-ui復雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序詳解
這篇文章主要給大家介紹了關于element-ui復雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序的相關資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
下面小編就為大家分享一篇基于vue-cli 打包時抽離項目相關配置文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文通過實例代碼給大家介紹了vue和webpack項目構建過程常用的npm命令,需要的朋友可以參考下2018-06-06
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12