SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Element UI 2.13.2 分栏间隔</title>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">

	</script>
	<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.2/theme-chalk/index.css" />
	<script src="https://cdn.staticfile.org/element-ui/2.13.2/index.js">

	</script>

	<style>
		.el-row {
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
		}

		.el-col {
			border-radius: 4px;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.grid-content {
			border-radius: 4px;
			min-height: 36px;
		}

		.row-bg {
			padding: 10px 0;
			background-color: #f9fafc;
		}
	</style>
</head>

<body>
	<div id="app">
		<p>{{ message }}</p>

		<div>
			<el-row :gutter="50">
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
		</div>

	</div>

	<script>
		new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
	</script>
</body>

</html>