解讀element ui el-row標(biāo)簽中的gutter用法
element ui el-row標(biāo)簽中的gutter用法
在 Element UI 的 el-row 標(biāo)簽中，gutter 屬性用于設(shè)置行內(nèi)列之間的間距（空隙）。
這個(gè)屬性通常用于控制列之間的水平間距，使得布局看起來更加美觀和整齊。
當(dāng)你在一個(gè) el-row 中包含多個(gè) el-col（列）時(shí)，你可以使用 gutter 屬性來設(shè)置列之間的空隙，以增加頁面的可讀性和美觀度。
例如：
<template>
<el-row :gutter="20">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
</template>在上面的示例中，我們在 el-row 中設(shè)置了 gutter 屬性為 20，這意味著 Column 1 和 Column 2 之間的水平間距為 20px。
通過調(diào)整 gutter 屬性的值，你可以自定義列之間的間距以滿足你的布局需求。這有助于創(chuàng)建各種不同樣式的頁面布局。
el-row的gutter注意事項(xiàng)
<el-row :gutter=20> <el-col :span=8></el-col> <el-col :span=8></el-col> <el-col :span=8></el-col> </el-row>
注意：
gutter會使el-row的容器寬度增加20px，因?yàn)榇嬖趍argin-left:-10px、margin-right:-10px，在全屏寬度時(shí)候可能會導(dǎo)致出現(xiàn)橫向滾動(dòng)條。
可在el-row父元素設(shè)置overflow:hidden;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法
這篇文章主要介紹了vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
v-model 是 vue.js 提供的語法糖，根據(jù)不同的表單控件監(jiān)聽不同的事件，實(shí)現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
Vue使用ElemenUI對table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式,文中通過介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了在vscode里使用.vue代碼模板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
vue實(shí)現(xiàn)虛擬列表組件解決長列表性能問題
這篇文章主要介紹了在vue中實(shí)現(xiàn)虛擬列表組件，解決長列表性能問題,本文給大家分享實(shí)現(xiàn)思路及實(shí)例代碼，需要的朋友可以參考下2022-07-07
vue 項(xiàng)目中當(dāng)訪問路由不存在的時(shí)候默認(rèn)訪問404頁面操作
這篇文章主要介紹了vue 項(xiàng)目中當(dāng)訪問路由不存在的時(shí)候默認(rèn)訪問404頁面操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問題
這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁面的數(shù)據(jù)，帶樣式，也就是說好看點(diǎn)顯示,需要的朋友可以參考一下2021-11-11