elementui中el-row的el-col排列混亂問題及解決
更新時間：2024年08月07日 09:08:19 作者：前端菜鳥。
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
el-row中el-col排列混亂
解決方案
將el-row中元素改為flex布局
設(shè)置flex-wrap: wrap，避免el-row中元素span之和超過24時擠在一行
.el-row{
display:flex;
flex-wrap: wrap;
}el-col和el-row結(jié)合el-form,位置錯亂問題
el-row和el-col配合el-form 出現(xiàn)排版錯亂
問題表現(xiàn)
el-col的內(nèi)容為空，正常；el-col的內(nèi)容不一樣，回顯時，有時正常，有時錯亂
問題原因
el-row和el-col的中的span元素之和超過了24的時候，就會出現(xiàn)排版錯亂（可見elemet官網(wǎng)，柵格布局方式）
錯誤代碼結(jié)構(gòu)
修改結(jié)構(gòu)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在?Vuex?中,actions?的設(shè)計默認只支持單個參數(shù)傳遞,這有時會限制我們的使用場景,下面我將詳細介紹幾種處理多參數(shù)傳遞的解決方案,從基礎(chǔ)到高級,幫助您靈活應(yīng)對各種需求,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue中的數(shù)據(jù)雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05
這篇文章主要給大家介紹了關(guān)于vue通過video.js解決m3u8視頻播放格式的方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue的土著指令和自定義指令的用法講解 ,需要的朋友可以參考下2018-02-02
vue.js將時間戳轉(zhuǎn)化為日期格式的實現(xiàn)代碼
這篇文章主要介紹了vue.js將時間戳轉(zhuǎn)化為日期格式的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
本篇文章主要介紹了如何理解Vue的.sync修飾符的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue中async-await的使用誤區(qū),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了vue購物車插件的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11