結(jié)合v-for，el-row與el-col控制卡片的布局問題

使用element-ui提供的組件card展示商品，前端獲得所有商品后再card外用v-for循環(huán)輸出展示所有商品。
想要一行展示四個(gè)商品，但是不知道怎么控制el-row，與el-col，最后的到的效果每行之間沒有間隙，并且感覺其實(shí)所有商品還是在一行顯示，只是因?yàn)閣idth不夠所以換行顯示，怎么解決以上問題？
1.代碼如下

            <el-row>
                <el-col :span="4" v-for="project in allprojects" :key="project.pid" :offset="1">
                    <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 260px;height: 320px;">
                        <div style="padding: 6px;height: 310px;">
                            <div>
                                <div><font size="5">{{project.pcname}}</font></div>
                                <div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
                            </div>
                            <div style="position: relative;top: 30px;">
                                <img src="../images/project/prohead.jpg" class="image">
                                <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
                            </div>
                            <div style="position: relative;top: 45px;">
                                &nbsp;&nbsp;<i class="el-icon-view"></i><span>{{project.ppageview}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-button type="text"><font size="4">查看</font></el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

2.效果如下：

回答

編輯回答

櫻花霓

根據(jù)你提供的進(jìn)行了稍微改動(dòng)(就改了一個(gè)地方，已經(jīng)備注好了)：

<!DOCTYPE html>
<html xmlns:border-radius="http://www.w3.org/1999/xhtml" xmlns:margin="http://www.w3.org/1999/xhtml"

xmlns:color="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<link rel="stylesheet" >
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div id="pro_form" style="position: relative;width: 100%;height: 1000px;">
    <div style="position: relative;top: 100px;left:130px;">
        <el-row>
            <!--就改這里一行-->
            <el-col :span="4" v-for="(project,index) in allprojects" :key="index" :offset="1" style="margin-bottom:40px">
                <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 260px;height: 320px;">
                    <div style="padding: 6px;height: 310px;">
                        <div>
                            <div><font size="5">{{project.pcname}}</font></div>
                            <div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
                        </div>
                        <div style="position: relative;top: 30px;">
                            <img src="../images/project/prohead.jpg" class="image">
                            <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
                        </div>
                        <div style="position: relative;top: 45px;">
                            &nbsp;&nbsp;<i class="el-icon-view"></i><span>{{project.ppageview}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button type="text"><font size="4">查看</font></el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
</div>
</body>
<style>

html,body{
    margin:0px;
    height:100%;
}
</style>
<script>

var vue=new Vue({
    el: '#app',
    data: {
        allprojects:[
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            }
        ]
    },
    methods: {//這里用于定義方法
    },
    computed: {//計(jì)算屬性
    }
})
</script>
</html>

注意事項(xiàng)：
這是為了圖方便才直接在el-col上直接寫的style，還可以通過CSS選中.el-col來添加相應(yīng)樣式