Система сетки Vuetify.js не выровнена, как ожидалось - PullRequest
Новая
       23

Система сетки Vuetify.js не выровнена, как ожидалось

0 голосов
/ 14 ноября 2018

У меня есть следующая часть моего интерфейса 

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

Так что я думаю, что у меня v-flex 12, а внутри у меня два v-flex по 6 каждый, поэтому они должны быть один рядом с другим. Но это то, что я получаю:

enter image description here

Итак, вы можете видеть, что каждое v-текстовое поле из каждого v-flex ДОЛЖНО иметь размер 6, но они одно под другим!

1 Ответ

0 голосов
/ 14 ноября 2018

Пожалуйста, обратитесь к вложенной сетке примеров в документации 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>
...