【Element】设置el-col绑定span属性值后界面没有效果

代码如下图：

 

运行效果：

 

 

 

 

错误原因：

1、检查el-row有没有被div包裹起来

        <div id="app">
            <el-row>
                <el-col :span="24">
                    <div class="bg-purple grid-content"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><div class="bg-purple-dark grid-content"></div></el-col>
                <el-col :span="12"><div class="bg-purple grid-content"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="bg-purple-dark grid-content"></div>
                </el-col>
                <el-col :span="8">
                    <div class="bg-purple grid-content"></div>
                </el-col>
                <el-col :span="8">
                    <div class="bg-purple-dark grid-content"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="bg-purple grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="bg-purple-dark grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="bg-purple grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="bg-purple-dark grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="bg-purple grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="bg-purple-dark grid-content"></div>
                </el-col>
            </el-row>
        </div>

2、实例化vue对象，并将div的id赋值给el 让vue进行渲染

<script type="text/javascript">
        new Vue({
            el: "#app"
        })
    </script>

3、检查element的js及css引入

4、检查vue的js文件引入