解決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的子標簽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>

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue-quill-editor的使用及個性化定制操作
這篇文章主要介紹了vue-quill-editor的使用及個性化定制操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
詳解基于vue-router的動態(tài)權限控制實現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權限實現(xiàn)方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue項目之ES6裝飾器在項目實戰(zhàn)中的應用
作為一個曾經的Java?coder,當?shù)谝淮慰吹絡s里面的裝飾器Decorator,就馬上想到了Java中的注解,當然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關于Vue項目之ES6裝飾器在項目實戰(zhàn)中應用的相關資料,需要的朋友可以參考下
2022-06-06
Vue中的默認插槽詳解
在 Vue 中,插槽（Slot）是一種非常強大且靈活的機制,用于在組件中插入內容,默認插槽是在父組件中傳遞內容給子組件時使用的一種方式,這篇文章主要介紹了Vue中的默認插槽詳解,需要的朋友可以參考下
2024-01-01
基于Vue3+TypeScript的全局對象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用，需要的朋友可以參考下
2022-09-09
vue3+vite+tdesign實現(xiàn)日歷式可編輯的排課班表填寫功能
本文介紹了如何使用Vue3和tdesign實現(xiàn)一個日歷式、可編輯的排班填寫功能,開發(fā)過程中面臨了年份和月份下拉框的實現(xiàn)、周期顯示以及可編輯日歷的樣式和數(shù)據(jù)獲取等挑戰(zhàn),感興趣的朋友一起看看吧
2025-01-01
解決vue單頁使用keep-alive頁面返回不刷新的問題
下面小編就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue之數(shù)據(jù)代理詳解
這篇文章主要為大家介紹了vue之數(shù)據(jù)代理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Vue生命周期介紹和鉤子函數(shù)詳解
這篇文章主要給大家介紹了關于Vue生命周期介紹和鉤子函數(shù)的相關資料，對大家學習或者使用vue2具有一定的參考學習價值，需要的朋友們下面隨小編一起來看看吧
2021-10-10
如何使用Vue進行文件預覽與打印功能
這篇文章主要給大家介紹了關于如何使用Vue進行文件預覽與打印功能的相關資料,這個功能其實也是自己學習到的,做完也有一段時間了,一直想記錄總結一下,需要的朋友可以參考下
2023-10-10