v-row 和 v-col 没有将两个项目放在 vuetify 的同一行中答案

【问题标题】：v-row and v-col not placing two items in same row in vuetifyv-row 和 v-col 没有将两个项目放在 vuetify 的同一行中
【发布时间】：2020-02-01 10:53:20
【问题描述】：

我正在尝试创建一个按钮和切换按钮位于同一行的表单。我有这个代码。

<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>

但元素是垂直排列的，而不是并排排列的。我想要并排的提交按钮和忽略缓存按钮。

我还尝试将它们设置在多个列中，如下所示。但他们仍然是一个在另一个之上。我也尝试为这两列设置cols="6"，但没有任何运气。有人可以帮我并排显示这些吗？

<template>
    <v-container>
        <v-row>
            <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
        </v-row>
        <v-row>
            <v-col>
                <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-col>
            <v-col>
                <v-switch v-model="cacheSwitch" :label="`Ignore Cache`"></v-switch>
            </v-col>
        </v-row>
    </v-container>
</template>

【问题讨论】：

按有人值守工作：codepen.io/reijnemans/pen/bGGbNrV?editors=1011，只有当容器空间不足时，列才会显示在彼此下方
我不这么认为。我添加了多个按钮，它们都排成一行。但是当我添加 v-switch 时，它会被推送到下一行。

标签： vue.js vuetify.js

【解决方案1】：

我可以使用<v-layout row wrap> 和<v-flex> 将它们放在一条线上。这是代码。

<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>

这是最终结果。

【讨论】：

【解决方案2】：

<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>

只要你有足够的空间就可以了。

【讨论】：