Все примеры в документах по элементам показывают компоненты, которые расположены на расстоянии друг от друга.
При использовании базового примера, такого как
new Vue({
el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
<div id="app">
<el-row :gutter="20">
<el-col :span="4">
<el-input></el-input>
</el-col>
<el-col :span="4">
<el-input></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<el-input></el-input>
</el-col>
<el-col :span="4">
<el-input></el-input>
</el-col>
</el-row>
</div>
вы видите, что две строки <el-input>
склеены друг с другом.
:gutter
- это решение для размещения столбцов по горизонтали. Каков правильный подход для размещения строк по вертикали? (см., Например, этот пример , где расположены две строки)