element ui 的布局按要求写了 el-row, el-col 但没有效果，怎么让其生效？

2019-10-07 07:25:13 9.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Element UI布局踩坑记：el-row的gutter为啥不生效？手把手教你正确使用响应式断点本文深入解析Element UI中el-row的gutter属性不生效的原因，并提供正确使用响应式断点的实战技巧。通过原理级解析和常见误区排查，帮助开发者掌握el-row与el-col的布局机制，提升后台管理系统开发效率。阅读详情

谢谢。实在搞不懂这个框架的坑了。。。

...全文

Element Plus El-Card组件深度解析：从布局容器到交互核心在Vue.js前端开发中，容器组件是构建清晰界面结构和实现信息分组的基石。其核心原理在于通过视觉隔离（如阴影、边框）和空间划分，有效降低用户的认知负荷，引导视觉焦点。从技术价值看，一个设计良好的容器组件不仅是UI装饰，更是响应式布局的柔性单元和复杂交互的承载者。在诸如后台管理系统、数据仪表盘等应用场景中，容器组件能大幅提升代码组织性和用户体验。本文聚焦于Element Plus组件库中的El-Card，深入探讨其作为“万能容器”在Vue项目中的高级应用，涵盖布局系统集成、样式深度定制以及与El-Table、阅读详情

yuandejun

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

VSUF 2020-11-10

打赏
举报

引用 7 楼罗三胖不胖的回复:

没有挂在vue实例，加上这一段： <script> var app = new Vue({ el:'app', }) </script> 然后再把你的布局用一个div包起来<div id='app'>，就ok了

正解，亲测。

hotpot_no_guo 2020-05-29

打赏
举报

我也遇到同样的问题，请问你是怎么解决的啊

罗三胖不胖 2020-04-02

打赏
举报

没有挂在vue实例，加上这一段： <script> var app = new Vue({ el:'app', )} </script> 然后再把你的布局用一个div包起来<div id='app'>，就ok了

众生皆苦唯有我甜 2019-10-08

打赏
举报

检查是否引入vue的css样式，vue页面内template内是否只有一个标签，

瘦子先生 2019-10-08

打赏
举报

NANU-NANA 2019-10-07

打赏
举报

引用 3 楼 yuandejun 的回复:

[quote=引用 1 楼 NANU-NANA 的回复:]


<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

我给 el-row 加了id属性又执行了： new Vue().$mount('#row');[/quote] 是不是css的问题？你加这个了么 @import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");

yuandejun 2019-10-07

打赏
举报

引用 1 楼 NANU-NANA 的回复:



<el-row :gutter="10">

  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>

  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>

  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>

  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>

</el-row>

我给 el-row 加了id属性又执行了：

new Vue().$mount('#row');

yuandejun 2019-10-07

打赏
举报

引用 1 楼 NANU-NANA 的回复:



<el-row :gutter="10">

  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>

  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>

  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>

  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>

</el-row>

页面没有变化啊。还是那个样子。没有分栏。

NANU-NANA 2019-10-07

打赏
举报


<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

element ui 的布局按要求写了 el-row, el-col 但没有效果，怎么让其生效？

相关推荐