【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文件引入