element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題
更新時(shí)間：2024年08月07日 08:42:41 作者：學(xué)編程的北極熊
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
el-row中設(shè)置:gutter間隔不生效
問(wèn)題描述
在使用element-ui時(shí)，采用布局中的el-row與el-col，
想要將el-col之間設(shè)置間隔，
在el-row中添加屬性:gutter，發(fā)現(xiàn)并沒(méi)有間隔出現(xiàn)
問(wèn)題代碼
<el-row :gutter="20">
<el-col :span="12" style="border:1px solid #000">第一部分
</el-col>
<el-col :span="12" style="border:1px solid #000">第二部分
</el-col>
</el-row> 解決方法
后面發(fā)現(xiàn)是因?yàn)樵趀l-col中設(shè)置了style樣式，才導(dǎo)致gutter的間距樣式不起作用。
所以如果想設(shè)置樣式的話就直接加個(gè)class形式
<el-row :gutter="20">
<el-col :span="12" class="col_style">第一部分
</el-col>
<el-col :span="12" class="col_style">第二部分
</el-col>
</el-row> <style>
.col_style {
style="border:1px solid #000"
}
</style>element-ui庫(kù)的el-row的gutter=10間距失效
完整代碼在vue中可直接執(zhí)行
若想gutter間距效果體現(xiàn)出來(lái)，需要將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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果（仿京東移動(dòng)站導(dǎo)航）
這篇文章主要介紹了vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果（仿京東移動(dòng)站導(dǎo)航）,需要的朋友可以參考下2017-04-04
Vues中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn)的步驟詳解
在Vue應(yīng)用中,利用Vue?Router進(jìn)行頁(yè)面間的導(dǎo)航是一個(gè)常見(jiàn)需求,本篇博客將通過(guò)示例代碼詳細(xì)介紹如何在Vue組件中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn),需要的朋友可以參考下2024-05-05
Vue3+Vant實(shí)現(xiàn)簡(jiǎn)單的登錄功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vant實(shí)現(xiàn)簡(jiǎn)單的登錄功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
uniapp中如何基于vue3實(shí)現(xiàn)輸入驗(yàn)證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個(gè)手機(jī)驗(yàn)證碼輸入框組件,通過(guò)封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實(shí)現(xiàn)驗(yàn)證碼輸入功能,適合需要增加手機(jī)驗(yàn)證碼驗(yàn)證功能的開(kāi)發(fā)者參考使用2024-09-09
Vue3+PDF.js實(shí)現(xiàn)高清PDF預(yù)覽組件開(kāi)發(fā)(移動(dòng)端)
本文基于Vue3和PDF.js封裝了一套移動(dòng)端PDF預(yù)覽組件,其核心功能包括高清渲染,雙指手勢(shì)縮放,按鈕縮放等內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-05-05
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
為vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法
這篇文章主要介紹了vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
淺談vue項(xiàng)目重構(gòu)技術(shù)要點(diǎn)和總結(jié)
這篇文章主要介紹了淺談vue項(xiàng)目重構(gòu)技術(shù)要點(diǎn)和總結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
組件是?vue.js?最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用，這篇文章主要介紹了Vue組件間傳值的實(shí)現(xiàn)2022-09-09