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 文档中的嵌套网格示例。

为了保持嵌套的网格布局，每一行都应该用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>