解決element-ui庫的el-row的gutter=10間距失效問題
更新時間：2024年08月16日 09:07:15 作者：半張一塊，
這篇文章主要介紹了解決element-ui庫的el-row的gutter=10間距失效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
el-row的gutter失效問題
完整代碼在vue中可直接執(zhí)行
若想gutter間距效果體現(xiàn)出來，需要將css樣式，（如：border，background等），添加在el-col的子標(biāo)簽div中的class下才能生效
類名添加在el-col中樣式是有了，但是間距確不體現(xiàn)
- html代碼
<el-row :gutter='20'> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> </el-row>
- css代碼
.element{
.el-row{
padding: 20px;
.el-col{
margin-bottom: 10px;
.gutter{
border: 1px solid #ccc;
padding: 10px 10px;
}
}
}
}完整代碼
<template>
<div class="element">
<el-row :gutter='20'>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
</el-row>
</div>
</template><script>
export default {
name: 'Elememt'
};
</script>
<style lang='less' scoped>
.element{
.el-row{
padding: 20px;
.el-col{
margin-bottom: 10px;
.gutter{
border: 1px solid #ccc;
padding: 10px 10px;
}
}
}
}
</style>總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-quill-editor的使用及個性化定制操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
詳解基于vue-router的動態(tài)權(quán)限控制實(shí)現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權(quán)限實(shí)現(xiàn)方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中的應(yīng)用
作為一個曾經(jīng)的Java?coder,當(dāng)?shù)谝淮慰吹絡(luò)s里面的裝飾器Decorator,就馬上想到了Java中的注解,當(dāng)然在實(shí)際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
在 Vue 中,插槽（Slot）是一種非常強(qiáng)大且靈活的機(jī)制,用于在組件中插入內(nèi)容,默認(rèn)插槽是在父組件中傳遞內(nèi)容給子組件時使用的一種方式,這篇文章主要介紹了Vue中的默認(rèn)插槽詳解,需要的朋友可以參考下2024-01-01
基于Vue3+TypeScript的全局對象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用，需要的朋友可以參考下2022-09-09
vue3+vite+tdesign實(shí)現(xiàn)日歷式可編輯的排課班表填寫功能
本文介紹了如何使用Vue3和tdesign實(shí)現(xiàn)一個日歷式、可編輯的排班填寫功能,開發(fā)過程中面臨了年份和月份下拉框的實(shí)現(xiàn)、周期顯示以及可編輯日歷的樣式和數(shù)據(jù)獲取等挑戰(zhàn),感興趣的朋友一起看看吧2025-01-01
下面小編就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要給大家介紹了關(guān)于Vue生命周期介紹和鉤子函數(shù)的相關(guān)資料，對大家學(xué)習(xí)或者使用vue2具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨小編一起來看看吧2021-10-10
這篇文章主要給大家介紹了關(guān)于如何使用Vue進(jìn)行文件預(yù)覽與打印功能的相關(guān)資料,這個功能其實(shí)也是自己學(xué)習(xí)到的,做完也有一段時間了,一直想記錄總結(jié)一下,需要的朋友可以參考下2023-10-10