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