解讀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è)屬性通常用于控制列之間的水平間距，使得布局看起來(lái)更加美觀和整齊。
當(dāng)你在一個(gè) el-row 中包含多個(gè) el-col（列）時(shí)，你可以使用 gutter 屬性來(lái)設(shè)置列之間的空隙，以增加頁(yè)面的可讀性和美觀度。
例如：
<template>
<el-row :gutter="20">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
</template>在上面的示例中，我們?cè)?el-row 中設(shè)置了 gutter 屬性為 20，這意味著 Column 1 和 Column 2 之間的水平間距為 20px。
通過(guò)調(diào)整 gutter 屬性的值，你可以自定義列之間的間距以滿足你的布局需求。這有助于創(chuàng)建各種不同樣式的頁(yè)面布局。
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會(huì)使el-row的容器寬度增加20px，因?yàn)榇嬖趍argin-left:-10px、margin-right:-10px，在全屏寬度時(shí)候可能會(huì)導(dǎo)致出現(xiàn)橫向滾動(dòng)條。
可在el-row父元素設(shè)置overflow:hidden;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本文是小編給大家收藏整理的Vue常見(jiàn)面試題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題及解決方案
這篇文章主要介紹了vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報(bào)錯(cuò)原因是typescript?只能理解?.ts?文件，無(wú)法理解?.vue文件，本文通過(guò)多種情況分析給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01
vuejs2.0實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)示例
本篇文章主要介紹了vuejs2.0實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Vue3實(shí)現(xiàn)word轉(zhuǎn)成pdf代碼的方法
在Vue 3中,前端無(wú)法直接將Word文檔轉(zhuǎn)換為PDF,因?yàn)閃ord文檔的解析和PDF的生成通常需要在后端進(jìn)行這篇文章主要介紹了Vue3實(shí)現(xiàn)word轉(zhuǎn)成pdf代碼的方法,需要的朋友可以參考下,2023-07-07
vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決
這篇文章主要介紹了vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem)
這篇文章主要介紹了Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04