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è)置樣式的話(huà)就直接加個(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下才能生效

類(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>