如何使用 VueJS Vuetify Grid 将组件放在两列上？

Question

我想对齐两个组件以在两列上显示一些数据，我遵循了官方教程 Vuetify Grid。在我的案例中，组件像行列表一样固定，在屏幕上我放置红色方块来显示我的目标，并显示代码的结果。另外，我尝试更改row为column但不起作用，它保留在两行中。

    <v-container>
      <v-layout row>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
      </v-layout>
    </v-container>

完整代码

    <template>
  <v-content class="pa-1" fluid>
    <v-btn
      color="blue"
      dark
      small
      fixed
      bottom
      right
      fab
      @click="showRegisterTransactionDialog = true"
    >
      <v-icon>mdi-plus</v-icon>
    </v-btn>

    <v-data-table
      :mobile-breakpoint="NaN"
      :headers="headers"
      :items="transactionsLocal"
      :items-per-page="3000"
      :hide-default-footer="true"
      :single-expand="singleExpand"
      :expanded.sync="expanded"
      item-key="id"
      show-expand
      sort-by="showDate"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Fluxo de caixa</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template>

      <template v-slot:item.value="{ item }">
        <div style="color:green;" v-if="item.type == 'entry'">{{item.value}}</div>
        <div v-else style="color:red;">{{item.value}}</div>
      </template>

      <template v-slot:expanded-item="{ headers, item }">
        <v-container>
          <v-layout row>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
          </v-layout>
        </v-container>
      </template>
    </v-data-table>

    <RegisterTransactionDialog
      @hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
      :show="showRegisterTransactionDialog"
    ></RegisterTransactionDialog>
  </v-content>
</template>

更新

我已将背景颜色设置为黑色v-container，发现问题就在于此。但是，我也不知道修复它。

<v-container style="background-color: black;">

Answer 1

为什么不尝试使用这样的东西而不是 v-flex：

<v-col cols="12" md="6">
</v-col>

<v-col cols="12" md="6">
</v-col>