业务中经常会遇到多行多列展示的表单需求，所以我们会搭配着栅格组件来实现。利用栅格化布局 span 超过 24 会自动折行的功能。

<el-form ref="form" :model="form" label-width="auto">
  <el-row :gutter="10">
    <el-col :span="12">
      <el-form-item label="字段A">
        <el-input v-model="form.a" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span='12'>
      <el-form-item label="字段B">
        <el-input v-model="form.b" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

如果这样组合使用的同学，肯定会遇到过表单项错位的问题。因为 Element UI 是栅格组件默认是使用的 float 布局的，所以如果你的 <el-form-item> 元素高度不一致的话，就会出现下边截图中布局错位的问题。

字段C项并没有正确出现在字段A项的正下方，而是错开一列出现在了字段B的下方。

解决方式
在【运行和调试】面板右侧的 齿轮（⚙） 或者 更多（···） 按钮上右键，勾选【开始调试】即可。

昨天在思否遇到一个问题 👉 VSCode启动调试控件被不小心隐藏了，如何恢复显示？
开始以为是一个很初级的问题，就是问题主把【活动面板】中的【调式面板】隐藏了，不知道如何恢复显示了。

那么直接在【活动面板】中右键然后在弹出的菜单中勾选【运行和调试】就行了。