Vue.js v-row和v-col未在vuetify中的同一行中放置两个项目

我正在尝试创建一个窗体，其中按钮和切换位于同一行。我有这个密码

<template>
    <v-container>
        <v-row>
            <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
        </v-row>
        <v-row>
            <v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
            <v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
            <v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
            <v-switch v-model="cacheSwitch" :label="`Ignore Cache`"></v-switch>
        </v-row>
    </v-container>
</template>

我可以使用

和

将它们放到一行。这是代码

<template>
    <v-container fluid>
        <v-layout row wrap>
            <v-flex xs12 sm12>
                <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
            </v-flex>
        </v-layout>
        <v-layout row wrap>
            <v-flex xs12 sm2>
                <v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
                <v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
                <v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
            </v-flex>
            <v-flex xs12 sm6>
                <v-switch v-model="ignoreCache" :label="`Ignore Cache`"></v-switch>
            </v-flex>
            <v-flex xs12 sm4>
                <v-btn v-on:click="onQuery1Click">Query 1</v-btn>
                <v-btn v-on:click="onQuery2Click">Query 2</v-btn>
                <v-btn v-on:click="onQuery3Click">Query 3</v-btn>
            </v-flex>
        </v-layout>
    </v-container>
</template>

提交
取消
问题1
问题2
问题3

这是最终结果

按钮1
按钮2
按钮3

---

只要你有足够的空间，你就会没事。

就像有人看管的那样工作：，只有当容器没有足够的空间时，颜色才会显示在彼此下面，我认为情况并非如此。我添加了多个按钮，它们都排成一行。但当我添加v型开关时，它被推到下一行。

<template>
    <v-container fluid>
        <v-layout row wrap>
            <v-flex xs12 sm12>
                <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
            </v-flex>
        </v-layout>
        <v-layout row wrap>
            <v-flex xs12 sm2>
                <v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
                <v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
                <v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
            </v-flex>
            <v-flex xs12 sm6>
                <v-switch v-model="ignoreCache" :label="`Ignore Cache`"></v-switch>
            </v-flex>
            <v-flex xs12 sm4>
                <v-btn v-on:click="onQuery1Click">Query 1</v-btn>
                <v-btn v-on:click="onQuery2Click">Query 2</v-btn>
                <v-btn v-on:click="onQuery3Click">Query 3</v-btn>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<v-row>
 <v-col cols="auto">
  <v-btn>Button 1</v-btn>
  <v-btn>Button 2</v-btn>
  <v-btn>Button 3</v-btn>
 </v-col>
</v-row>