Vuetify.js 网格系统未按预期对齐

Question

我的前端有以下部分

<v-container grid-list-lg>
    <v-layout row wrap>
      <v-flex
      xs12
      v-bind:key="producto.id"
      v-for="producto in productos">

          <v-flex xs6>
            <v-text-field
              :id="'id-'+producto.idProd_factura"
              label="  ID del Producto">
            </v-text-field>
          </v-flex>
          <v-flex xs6>
            <v-text-field
              :id="'nombre-'+producto.idProd_factura"
              label="Nombre"
              box
              disabled="true">
            </v-text-field>
          </v-flex>
      </v-flex>
    </v-layout>
  </v-container>

所以我认为我有一个 12 的 v-flex，在这里面我有两个 6 个的 v-flex，所以它们应该是一个并排的。但这就是我得到的：

所以你可以看到，每个 v-flex 中的每个 v-text-field 的大小都为 6，但它们是一个在另一个之下！

Answer 1

请参考 Vuetify 文档中的 nested grid 示例。

为了保持嵌套网格布局，每一行都应该用v-layout 组件包裹。下面以结构为例：

<v-layout row wrap>
  <v-flex xs12>
    <v-layout>
      <v-flex xs6>
        <!-- input field -->
      </v-flex>
      <v-flex xs6>
        <!-- input field -->
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>