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

[yuandejun]

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

[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>

[yuandejun]

引用 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>

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

[yuandejun]

引用 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');

[NANU-NANA]

引用 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");

[瘦子先生]

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 这个css 有没有引入 ？？？

[众生皆苦唯有我甜]

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

[罗三胖不胖]

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

[hotpot_no_guo]

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

[VSUF]

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

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

正解，亲测。