如何使用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>

UPDATE

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